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Two brains are better than one. 


Announcing the new dual-processor Power Mac G4. With its built-in 
Velocity Engine, a single G4 processor can reach supercomputer speeds of over 
three billion calculations per second (three gigaflops) — outperforming even the 
fastest Pentium III” Now, with a pair of G4 processors 
combining their power to attain speeds of over seven 


gigaflops, the new Power Mac G4 can cut through a 
common suite of Photoshop tests twice as fast as a 1GHz Pentium III-based PC. 
A level of performance that will definitely double your pleasure and double your 
fun. To find out how the dual-processor Power Mac G4 can accelerate the work 
you do every day, visit us at www.apple.com/uk or call 0800-783-4846. 


U 


Think different. 


*In CPU and Photoshop tests, ©2000 Apple Computer, Inc. All rights reserved. Apple and the Apple logo are trademarks of Apple Computer, Inc., registered in the US 
and other countries. Power Mac, Think different and Velocity Engine are trademarks of Apple Computer, Inc. Pentium is a registered trademark of Intel Corp. 
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A guide to all the software and 
demos provided on our cover CD 


The latest news from the Flash 
world including flashforward 2000 
and the Flash Film Festival... 


Get to grips with the latest features 
and tools in the new version of 
Flash. The demo is on our CD 


Choose the best technology for the 
job when designing a site 
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Shockwave Basics 71 i 


Build Flash applications with the 
minimum of scripting 


Get started with the basics on 
animation, navigation and image 
compression in Director 


Design an interface entirely in 
Flash with the pros from Headstate 


Subscribe to Computer Arts and 
take advantage of our special offer 
on Computer Arts Specials 
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How this leading UK design studio 
is bringing a spicy sauce mix to 
Web design with Shockwave 


Build an interactive MP3 player 
into your site using Flash 


Adobe's new contender uses the 
Flash SWF format. Overlook its 
design tools at your peril 


Get every issue of Computer Arts 
Special for half price 
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A guide to the Shock behaviours 
and Flash library on our CD 


Our Intermediate Shockwave 
tutorial shows you how to use Lingo 
for slicker Website creation 


Constructivism and interactive 
design meet head on... 


Use Flash with After Effects to 
create impressive animation 
sequences for any medium 
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A massive bundle of Web software 
from Macromedia 


Comprehensive listing of the 
key extras and add-ons for Flash 
and Shockwave 


Developing fun and games for the 
Web, in downtown Londinium 


Reduce the workload by designing 
for advanced server interaction 
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Ever wanted to perform masking 
that was virtually impossible by 
conventional methods? Now you can. 


Introducing Corel® KnockOut 1.5—cutting- 
edge masking software that'll revolutionise 
the way you design. 
It gives you fast 
precision handling of 
once-impossible image 
details, including hair, 
smoke, shadows, glass, 
fire, water, blurred objects 


and more. Now that’s sweet. 


Powerfully accurate masking. 
In a fraction of the time. 


This advertisement was designed and created using award-winning Corel0RAW® graphics software and 
Corel KnockOut masking software. 


Corel Tel.: 02072 988505 

Copyright © 2000 Corel Corporation. All rights reserved. Corel and CorelDRAW are registered trademarks of 
Corel Corporation or Corel Corporation Limited. KnockOut is a trademark of Uttimatte Corporation used under 
licence. Mac is a registered trademark of Apple Computer, Inc. All other product, font and company names 
and logos are trademarks or registered trademarks of their respective corporations. 


4 XK 


nockOut.. 


For Mac® and PC! 


www.corel.co.uk/corelknockout 
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Netscape Online 


THE FREE INTERNET SERVICE IN 
FUTURE PUBLISHING 


Tuas 13th Oce 


1p association with 


Design and deliver distinctive, 
low-bandwidth Websites with 
Macromedia Flash 5, the 
professional standard for producing 
high-impact Web experiences. 


Quickly create buttons, animations, 
and page comps. Everything 
remains editable, including files 
from leading graphics applications. 
Save production time with the 
History panel, step-by-step button 
maker, and the Library. 


The professional solution for 
designers publishing for print and 
Web, offering time-saving 
productivity features. 


Streamlines the authoring process 
with centralized, automated 
functions that make it easier to 
manage assets and create content 
for low-bandwidth delivery. 


Some seriously attractive 
enhancements — Flowcharts, 
increased resolution and support 
for 3D channels. 
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Flexible Transparency control, live 
feathering and instant drop 
shadows and glows mean Adobe's 
vector masterpiece keeps getting 
better and better. Also with 
Web-safe RGB workflow. 


All the resources you'll need for our 


Flash, After Effects, Generator and 
Lingo walkthroughs. 


From simple actions to complex 3D 
behaviours — 64 seriously useful 
resources for everyone. 
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flashforward 
+ Flesh Film Festival 
London, Notional Flt Theatre, Nov. 27.28 


lynda.com 


UNITED DIGHAL ARTISTS 
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flashforward2000 


Designers and developers gather from all around the globe for 


the year’s most essential Flash event... 


lashforward2000 is finally coming 
to Britain after its successful 
sell-out visits to New York and San 
Francisco which drew Web 
designers and developers from 33 countries. 
The three-day event is designed for the vast 
number of digital artists, designers, 
animators, developers and entrepreneurs 
who are already embracing Flash technology, 
and takes place on 27-29 November, 
alongside the Flash Film Festival. Visitors 
have been promised three days of keynotes, 
advanced technique and design sessions, 
hands-on training, exhibitions and Q&A 
sessions showcasing Flash and Adobe 
LiveMotion and shedloads of other products. 
The three-day conference will be a unique 
opportunity for designers to take part in 
sessions on motion graphic design, design 


theory, gaming, animation, interactivity and 
more. The event will be presented by the 
world’s foremost Web development and 
motion graphics experts, including Joshua 
Davis from praystation.com, Daljit Singh and 
Mickey Stretton from Digit Digital 
Experiences and Lynda Weinman of 
lynda.com fame. 


Unqualified success 


The two previous shows in San Francisco and 
New York were unqualified successes, with 
both the public and the media singing its 
praises. Streamingmediaworld.com 
exclaimed that, “there is a flavor [sic] of 
excitement that is more like the Oscars than 
Internet tech. The technology is here — in 
spades — but what fuels the atmosphere is 


Visitors to Flashforward2000 are promised a bevy of keynotes, workshops and exhibitions. 


what you can do with it.” And Jamesgang.com 
dubbed it, “Woodstock for Webheads”. 

You can register online by going to: 
[w] www.registerbynet.co.uk/flashforward, or 
you can call the registration hotline on 0870 
751 1526. Early registration to the conference 
plus the film festival is priced at £795 until 
10 November, and admission thereafter is 
£995. To receive more info or register online 
visit [w] www.flashforward2000.com GX) 


To find out more about the forthcoming 
flashforward2000 check out [w] www.macromedia.com 
and [w] wwwflashforward2000,com 


A celebration of the 

world’s best Shockwave 
Flash creations... 

Macromedia is sponsoring the Flash Film 
Festival, which will be running alongside 
flashforward2000 on November 27-29 at 
the National Film Theatre. The Festival is set 
to be a celebration of the world’s best vector 
and motion graphic creations in the SWF 
format. On the first night, there will be a 
screening of 50 shortlisted pieces — 
chosen via an online public vote, which 
you'll be able vote on from 1 November at 
[w] www-lashfilmfestival.com. Plus, from 
this line-up, winners in ten categories will 
be chosen. Tickets for the event, including 
the three-day conference cost £795 until 
10 November, and £995 thereafter, but 
we've managed to get our hands on one 
precious ticket, so if you fancy your chances 
you can enter our competition over the 


page towinone. CEE 


Johnny Casanova 
The Unstoppable Sex Machine 


Flash makes the leap from one small screen to another... 


nd you thought that Flash was 
limited to the Web... for shame. 
f r/ Fictitious Egg has directed a 

‘fl cartoon made entirely in Flash 
which was aired on Channel 4 back on 23 
September as part of C4’s Animation Week. 


After changing his surname from Worm to Casanova, 
little Johnny expects a whole lot of lovin’. 


If you missed Johnny Casanova, you should 
be kicking yourself. The story is voiced by the 
comic talents of Simon Pegg, Darren Boyd, 
Doon Mackichan, Morwenna Banks and 
Nigel Planer, and is about a young lad 
unglamorously christened Johnny Worms 


But even after adopting all the traits that his new 
name suggests, poor Johnny still has no luck. 


who doesn't seem to have much Luck with the 
fairer sex. In order to rectify the problem, he 
changes his name to Casanova, and adopts 
the more poetic traits associated with it: he 
writes love poetry, wears the hottest clothes 
and styles his hair, but all to no avail — the 
girls still aren't looking at him twice, poor 
love. The original stories — Johnny Casanova 
The Unstoppable Sex Machine and The 
Changing Face of Johnny Casanova — were 
written by Jamie Rix in 1996 and 1998 
respectively, before being turned into Flash 
animation by Andy Wyatt and the team at 
Fictitious Egg. The five-minute pilot was 
produced by Elephant Productions, which is 
hoping that Channel 4 will snap up the entire 
Johnny Casanova series. EXE 
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Barbie.com 


She’s a Barbie girl, in a virtual Barbie world... 


1" e voted this the site you'd least expect us 
i to write about, but we thought the 
il element of surprise might take you all 


off-guard. So while you're swaying slightly with 
shock, point your browsers to [w] www.barbie.com 
and revel in the sheer campness of it all. It's definitely 
worth a look, if only to appreciate the sheer wealth of 
Flash goodies that have been incorporated to make 
the site accessible and fun for little girls. There are 
games, an interactive fashion show, a page where 

you can listen to Barbie songs or make your own from 
a selection of tunes, beats and extra things like that 


on the Barbie Mixer, download pictures, and even go 


af 


Barbie guides you through all her fashion secrets at 
the rather flashy Barbie.com 


to a virtual Barbie party. And when you get tired of 
all the excitement, you can climb back into that 
closet and choose Barbie's outfit for the ball. It's 
just too dreamy. 

But if that’s all a bit too girly for you, surf over to 
[w] www.bigfanof.com — a site dedicated to pro sports 
people, with stats, pics, biogs and loads of other stuff 
ona wealth of stars from the worlds of football, rugby, 
boxing, cycling and cricket. And all of it done in the 
prettiest Flash, too. Very natty. TEX 


Live it up with Barbie at the ‘virtual party’ section of 
the site, Flashis thoroughly utilised throughout. 


Macromedia Flash 5 
and Dreamweaver 
Integration Kit 


acromedia has announced that it’s 


i 
ft | launching a JavaScript Integration Kit 

tid for Flash 5, which will enable 
developers to use Dreamweaver on their sites. 
This will make it far easier to use 
Dreamweaver to enhance the 
control over Flash 5 content. The 
extensions will enable 
developers to use VCR-like 


controls to pan, zoom, pan-and- 


play Flash content using 

JavaScript Behaviours, macromedia 5 
crverkrgnthtowercoaies il gBesiengrerri 
and controlling images, and we a) 


easily implement Flash Player 
detection. The kit is free, and is available now from 
the Macromedia Exchange for Dreamweaver at 


[w] http://exchange.macromedia.com TEE 
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Jooze.com Oranje Awards 


Log on to Jooze.com, answer a simple question (in Flash that is) and you 
could be walking away with some fantastic prizes... 


new Website, [w] www.jooze.com 
( was launched on 18 September, with 
, a competition to find the world’s 
best Flash animators, via the 
Oranje Awards. Jooze is an online resource 
for the creative comunity. It provides a project 
exchange and marketplace for all those 
working in graphic design, photography, 


ae 


CORPORATE PARTNER | PRIZES | ENTRY DETAILS 


UPDATES 


writing, animation, Web design and print 
production. Entrants to the Oranje Awards 
have to answer the question “What is Jooze?” 
with a Flash animation of no longer than 45 
seconds — winners will receive $2,500 and a 
copy of Flash 5. 

The CEO of Jooze, Ho Chaw Ming, said: 
“We hope to encourage and raise the 


oranije. 


VIEWER'S CHOICE 


Enter the competition at [w] www.jooze.com and you could be walking away with $2,500 anda copy of Flash 5. 


Flashy ads 


}) tudio Soup has just completed 


- abrilliant marketing 


~ campaign for 


Fujifilm'’s new Finepix 40i, comprising 
of a 40-second multimedia advert 
developed in Macromedia Flash. 
Nicknamed the ‘Flashvert, it uses video 
stills to convey the video capture 
capabilities as well as sound to 
demonstrate the MP3 audio playback 
facility. Michelle Da Gama of Fujifilm 
explains: “Our new FinePix 40i digital 
camera is unique and a lot of fun as it 
combines digital photo capture with 
movie and MP3 functionality. We 
wanted to communicate these benefits 
ina different and more exciting way, and 
Studio Soup’s suggestions achieved this 
very well... we really believe that for the 


the sist. M P3 


short term, the future of Internet 
advertising is the ‘Flashvert.” And, 
looking at the advert ourselves, we'd 


have to agree with her. Check it out 


| 


standards of e-marketing through the use of 
animation and interactive technology, under 
an environment of sharing of skills, creative 
ideas and perspectives.” Which sounds like a 
good excuse for a knees-up to us. Entries will 
be vying for the Gold, Silver and Bronze 
awards, which will enable winners to have their 
work showcased in international magazines. 
The judges will be selecting winners based 
on concept, interactivity and technical 
proficiency of the entries, and will contribute 
to 80 per cent of the total score, while polling 
on the site will contribute to the remaining 20 
per cent. Better get weaving though, the last 
date for entries is 23 October, with the 
results announced on6 November. EX 


Use Jooze.com in 
4 Simple Steps: 


audio technology 


ras ee 


Fujifilm’s ‘Flashverts' might symbolise the rise of Flashas an advertising medium. Keep your eyes peeled. 


Picea cameo tcamre intone sin 


shabby, either. EEE 


yourself by heading off to NS 
[w] wwwujifilm.co.uk/geek-or-geezer. i 
Oh, and the digital camera isn't too 
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Shockwave.com 


The Web’s most shocking destination is back with all sorts of goodies — from 
arcade classics of the eighties to extremely angry gerbils... 


hockwave.com isn't just worth 
visiting to pick up the Latest version 
of Flash Player, it’s also filled to the 
brim with goodies, and it has 
recently been updated, with brand new 
animation. Top of the list is the music section, 
which contains a brilliant Flash version of 
Madonna’s Music video, complete with Ali G. 
Alongside this is the huge Games section — a 
mecca for retro coin-op lovers, with its 
spanking new Arcade Classics. In among 
these, you'll be able to play enduring classics, 
such as Spy Hunter, Defender, Rampage and 
Robotron complete with authentic arcade 
sound. Plus, you can find a plethora of 
cartoons — the best of which are Gerbil 
Genocide and The Adventures of 
Spontaneous Man — and interactive jollies 
where you can whizz a frog in a blender, if you 
so wish. What larks. And stuffed into a corner, 
there’re also tons of Flash and Shockwave 
greeting cards for the cranially challenged 
when it comes to birthdays. Brilliant for a bit 
of constructive time-wasting. EEE 


TL) Check out the all-new Shockwave.com line-up at, yep 
you guessed it [w] www.shockwave.com 


0 First Tube’ from PHISH, 
ev ot MOBY's top of the chart hits 


Remix 
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Check out the grahics! All the arcade classics are recreated in precise detail at Shockwave.com 


Win a ticket to flashforward2000 
and the Flash Film Festival 


+ Flash Film Festival 
London, National Film Theatre, Nov. 27-29 


lynda.com 


UNITED DIGITAL ARTISTS 


e've got one precious ticket, worth 
Ww £995, for the flashforward2000 
conference and the Flash Film Festival 
which will be running from the 27-29 November at 

the National Film Theatre. Macromedia's Flash is the 
industry standard for creating high-impact, vector- 
based Websites, and flashforward2000 has been 
designed for the ever-increasing number of digital 
artists, designers, animators, developers, audio 
experts, art directors, cartoonists and writers who 
are embracing Flash technology. The three-day event 
will be a unique chance to take part in workshops and 
Q&A sessions, and attend seminars and exhibitions 
of the very latest in Flash design and animation. 

The Film Festival will be a celebration of the 
world’s best vector and graphic creations in the SWF 
format. You can view the 50 finalists already at 
[w] www4lashfilmfestival.com, and vote online in any 
of the ten categories — the winners of the online vote 
will be announced on 27 November at the Festival. 


For your chance to win a ticket to both events 


answer the question and email your answer to 
[e] ca.compo@futurenet.co.uk stating 
flashforward2000 in the subject line. 

Please include your address and a daytime 
telephone number, so that we can contact you 


if you win. 


The question 
How many finalists are there in the Flash 


Film Festival? 


The rules 

Closing date for entries is Friday 17 November. 
Employees of the Future Network or Macromedia 
and their agents or families may not enter. Multiple 
entries will not be accepted. The editor's decision is 
final, there are no cash alternatives, and no other 


correspondance will be entered into. 


yn both events, go to 


and 
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Illustration: Ray Smith [t] 020 7833 8268 [w] www.organisart.co.uk 
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New Features in Flash 5 


Flash 5 introduces improved drawing and scripting tools to speed up 
workflow and improve the quality of results. We put some of those 
new functions through their paces... 


lash Sis one of those rare 
packages that almost makes 
work seem like fun. It always 
had that potential in the past, 
but now with a far more powerful scripting 
language than before, Flash is a delight for 
both code-loving boffins and 
aesthetically obsessed design types. 

For renaissance Web designers who can 
combine left-brain doodling with 
right-side logic, it’s what you started 
using the Web for. 


In this walkthrough we take a quick tour of 
the new tools and how to use them, but the 
big story isn't that Flash 5is radically 
different from previous versions — it’s 
probably better to describe this 
incarnation as being more in tune with the 
way designers work. Flash experimenters 
have long been trying to make the 
package's essentially linear structure 
function in a more object-oriented way. 
With new tools like Movie Explorer, which 
we've found to be a great boon when 


cleaning up movies prior to publication, 
that structure is finally visible. 

In our walkthrough we produce a 
‘Magic 8 Ball’-style application that 
requires a ridiculously small amount of 
code, sharing functions between a button 
and a single clip object. The resulting 
application can be as small as four single 
keyframes in length — leaving more than 
enough legroom to add a few extra bells 
and whistles and still end up with a 
pleasingly small download. 
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Part 1: Setting up 


Flash 5 dispenses with dialog boxes and replaces them with floating 
palettes. As we set up our movie we look at ways to manage them... 


© Just about the only traditional dialog box to 2) 
survive the transition from Flash 4 to Flash 5 is 

located in Modify>Movie. Open the dialog and 
change the background colour to a pale blue, 
leaving the other defaults. 


4 | Drag and drop the Swatches panel to the same 
palette. You should be left with just one 
palette containing six tabbed panels. Go to Window 
>Save Panel Layout. When prompted to input a 
name, type in ‘Drawing’. as you like, to suit different tasks. 


Double-click on the layer in the timeline and 
name it ‘Background’. If this is the first time 
you've used Flash 5 the default layout will be similar 
to the screenshot above. Go to View>Timeline to 
close it — we won't be needing it again for a while. 


Go to Window>Panel Sets. You'll see that 
there are now two entries, Default Layout and 
Drawing. You can save as many different panel sets 


3 | Close the panels with Instance and Character 
selected, so that you've just got the panel 
containing the Mixer and Info on screen. Click and 
hold the panel label marked Mixer and drag it to the 
palette containing the Info panel. 


6 | To quickly clear the screen of all panels (or to 
bring them back) click on a panel so they are 
active, then hit the TAB key. To reset the panels after 
you've finished messing around, choose the 

Default Layout option from Windows>Panel Sets. 


Part 2: Bézier tools 


Much has been made of Flash 5's new 
Bézier drawing tools. Here's a quick tour... 


vy The background of our project needs an 
irregular shape towards the left of the stage. a 

Select the Pen tool and click in the top left corner to 

add a point, then a second point about 30 

millimetres along. 


i 


way down the page, but this time, click and 
hold then drag the Bézier angles to curve the line. 
When you've finished, release the mouse button. 
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Make the third point about two thirds of the 


Complete the shape by adding another curve 

to the bottom of the stage, a fifth in the 
bottom right corner and the final point joins this and 
the first together. With the pen tool still selected, 
hover the cursor over a point on a curve. 


Part 2: Bézier tools continued... 


ead 
4 | Clicking on the point will straighten it. If the 


point already lies on a straight section, clicking 


will remove the point entirely. You can also add 
additional points by clicking on sections of 
highlighted line that don't have any. 


5 | While drawing you have two further modifiers. 


Holding down the SHIFT key constrains the 
curve to 45 degree increments, while clicking the 
canvas, the CTRL or Mac ALT key ends the current 
path and lets you start a new one. 


G Curves that you've drawn can be further 
altered with the Subselect Tool (the white arrow 
in the Toolbox). You can click and straighten points or 
simply adjust curves using Bézier handles. Enclosed 
paths can also be filled with the Paint Bucket. 


EEE 


Part 3: Strokes and fills 


Again with a floating mixer and set of swatches to complement the colour selection tools 
in the toolbox, the workflow changes quite a bit as we create buttons for our project... 


pat Ceara 


Create a button by going to Insert>New 

Symbol. Call the symbol ‘button’ and make 
sure the Button radio button is checked. You're 
taken to the button editor. Draw an ellipse on the 
stage, then hit CTRL or Mac ALT and K to bring up 
the alignment panel. 


With this new panel-based approach, the fill 
of the object that’s selected changes to reflect 

the alterations you've made straightaway. 

To save the current gradient as a swatch to use later, 

click on the arrow at the side of the panel and 

choose Add Gradient. 


Se a ROS en 


Go to Edit>Select All, then in the alignment 
panel choose To Stage, then click both the 

Centre Horizontal and Centre Vertical symbols. 

Click the fill inside the ellipse to make it active. 


8 | The same ‘instant application’ technique 
applies to altering the stroke around the shape. 
Select the line first by clicking on it with the cursor, 
then make any alteration in the Stroke panel. 


G Go to the Fill panel, and select Linear Gradient. 
Edit the fill by clicking on the colour well at 
either end of the spectrum and choosing a new 
colour from the drop-down colour swatch. 
Additional transition points can be added by 
double-clicking along the gradient. 


6 | This time, selecting the arrow alongside the 
panel gives you access to a custom stroke 
editor, which allows you to create a wide range of 
effects by applying different parameters — including 
results that mimic natural media. 
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Part 4: Cleaning up 


Flash's import options are more robust than in previous versions — aside from the ability to 
work with FreeHand files in native format, you can edit artwork imported in other formats... 


Without closing the current file, go to File>New, 
then File>Import & browse for the file bear.eps 


(available at [w]www.computerarts.co.uk/cdrom). 
The new file is selected on import. Click on the filled 
areas of the image around the teddy bear to select 
them, and delete everything except the bear. 


4 | When you've cleaned up the image and you're 
satisfied with your reconstruction work, go to 
Edit>Select All. With the bear selected simply go to 
Modify>Optimise - this should result in around an 
80 per cent reduction in curves and an even more 
‘cartoony' appearance. 


a When you get to the final area around the 
feet, go to Modify>Break Apart, this reduces 
the image down to a series of editable fills rather 
than discreet objects. Use the lasso tool to remove 
the cap and the ball. 


5 | With the bear image still selected, go to 
Modify>Group, then Edit>Copy. Close the 
current Movie and click No when you're prompted 
to save. In the previous Movie, which you should 
find still running in the background, go to 
Insert>New Symbol. 


ia 
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3 | Use the drawing tools in Flash to construct 
new legs for the bear. We simply copied the 
piece of leg that remained visible, flipped it vertical 
and pasted it in, using the arrow tool to join the 
lines. Then the left leg was duplicated, flipped and 
pasted onto the right. 


6 | Select Graphic Symbol as the symbol type and 
name it ‘Teddy’. In Symbol Editing mode, paste 
in the bear from the clipboard. Use the Alignment 
panel to centre the image in the stage. To add the 
bear to your movie, open the timeline and create a 
new layer. Drag and drop symbol to the main stage. 


a 
Part 5: Assembling the movie 


Most of the graphic elements for the movie are now in place. It's time for 
a check on resources and to arrange things in their appropriate layers... 
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a The finished version of our mini-application on 
the cover CD features bits of tweened animation 
that you can reproduce if you wish. For now though, 
we're going to concentrate on assembling the 
elements that we need to create interactivity. 


a 


So far you should have a layer called 

‘Background’ containing the Bézier shapes you 
drew earlier and a second layer containing the 
imported bear Graphic Symbol. Double-click on the 
layer label and name it ‘Teddy’. 


a 


SSAnwA a 


3 | If the Library isn't open, go to Window>Library. 
The Library should contain two objects - the 
imported bear and a button image. In the timeline, 
add a new layer called ‘Buttons’ above the 
background layer. 


Part 5: Assembling the movie continued... 


6 | Draw a white rectangle on stage and position it 


4 | With the new layer selected, drag and drop an Label the button ‘get answer’. When you've as shown. Switch to the Teddy layer and resize 
instance of the Library button to the stage and positioned the text to your complete and position the bear as illustrated. To accurately 
position it as shown. Use the Text tool to put a satisfaction, add another new layer in the timeline, resize the bear go to the Transform panel and input 
name on the button, open the Text Options panel below the Teddy layer but above the background ‘50 per cent’ in one of the scale boxes with 

from the Window menu and choose Static Text. layer — name it ‘TextBG’. Constrain selected. 


a 
Now, all the elements for our application are in Go to Window>Movie Explorer. Flash 5 gives g Selecting objects in the Movie Explorer 

place, we can look at alternate ways of you a hierarchical view of the contents of your also selects them on the stage and timeline, so 
keeping track of them. To isolate individual layers, Movie as well as the more traditional linear view. once everything is in position, you can use the 
while still being able to see what they contain, use Select an element and you'll see a full definition of movie explorer to quickly change between elements 
the Outline toggle. This now appears as a coloured the object, including its name, layer and starting as we add interactivity using the Frame, Instance 
square in the Layer Name label. point in the movie on the status bar. and Actions panels. 


Part 6: Adding interactivity 


Everything is now set to add scripted interactivity 
using the new look Actions panel... 


: 
| 
| 
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. - : Qo Save your work so far with the name 3] So far your movie should only consist of one 
| Add a new layer at the top of the timeline and ‘teddy.fla’. Browse to the file teddysays.txt keyframe over four layers (Background, 
name it ‘Actions&Text’. In Flash 4 the practice (available at [w]www.computerarts.co.uk/cdrom). TextBG, Buttons, Teddy, Actions&Text). SHIFT click 
would have been to add a distinct Labels layer too, This is a text file containing predefined variable on Frame 4 in each layer to select the entire column, 
but with the new panels they're much easier to strings of text. Copy it to the same folder as you just _then go to Insert>Frame. The entire movie only 
place - so this layer will do for labels as well. saved the Flash movie to. needs to be four frames long.... 


arts 
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With the frame still selected, go to the Frame 
- - Actions editor and add a Load Variables action 
Add a Keyframe to Frame 2 in the from the Actions sub-section. Type ‘teddysays.txt' in 


4 | Highlight Frame 1 in the Actions&Text layer. 
Click the Frame Action tab on the Movie 5 | 


heals / : Actions&Text layer (using Insert>Keyframe). the URL box and accept the remaining defaults. If 
Explorer, or if it's not open go to Window> Actions. With the frame still selected, gotoWindow>Panels _ the parameters boxes aren't visible, click the arrow 
Place a Stop action in the frame by selecting Basic and choose the Frame panel (if it's not already on the side of the editor panel and make sure 
Actions and double-click on Stop. visible). Give the frame the Label ‘randomise’. Normal Mode is on. 


Place a Keyframe at Frame 4 in the 


Add a new Keyframe at Frame 3 in the Actions&Text Layer. Add a Set Variable action 
Actions&Text Layer, and while it's selected go 8 | Make sure Expression is ticked in the value box and name the variable ‘option’. In the Value box 


to the Frame Actions editor. Add a Set Variable (not the variable box). This code generates a type the expression: eval(“option” add count). This 
action from the Actions sub-section. In the Variable random number from the predefined variable action defines the variable ‘option’ as the string 
box type ‘count’, and in the Value box type the ‘numvars' and puts it in the variable ‘count’ every ‘option’ plus the random number in ‘count’. Finally, 
following: Number(random(numvars))+1 time it's called. 


add a Stop action below that. 


Pal 


10 | With the same frame still selected, go to the 
Text tool on the tool box, and use it to draw a 


Make sure Go to and Play is ticked before you 
close the panel, save your file and test the 


box in the centre of the white text background 11 | Select the Get Answer button on stage. In the finished movie. Click on the Get Answer button to 
rectangle. In the Text Options panel, choose Actions Editor (now labelled Object Actions) add get arandom quote from ‘teddy’. If your version 
Dynamic Text and Multiline. Name the variable an On MouseEvent action and tick Press. Below that doesn't quite work, it may be worth checking that 
‘option’. This makes the content of the textbox the add aGo Toaction, and choose Scene 1, Frame Label, _all the relevant files are in the right directory and 
result of the code in the previous frames. Randomise from the available parameters below. that you've typed in the scripts properly. GEEy 
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2000AD. Still no flying cars, domestic robots, or holidays 
on Mars. But at least the EPSON Stylus Pro 9500 has arrived. 


Stop press! EPSON’s revolutionary new large 
format printers feature a spec sheet that 
would've read like science fiction 
a few years ago. 
The EPSON Stylus Pro 9500 
can print from A3 up to 
44"(BO+), on media up to 
1.5mm thick, with unrivalled 
1440 dpi image quality, using 
EPSON’s unique ColorFast pigment 


based inks. These inks dry instantly, offer a wider 


colour gamut than traditional pigmented inks and 
more than 200 years of light-fastness* 

After all this, the high speed automatic paper 
cutters and 6 colour printing features seem, 
let’s face it, a bit 20th Century. The new EPSON 
Stylus Pro 9500. Somebody call Tomorrow’s World. 


For more details on the complete 


EPSON 


See what you're missing 


large format range call 
0800 220 546, or 
visit our website at 


www.epson.co.uk 


*Lightfastness Test Criteria (indoor display conditions): Flourescent light source; 70k lux intensity; 24°C; 60% Humidity; 
2mm Soda Lime glass mount; Fade Criteria: Pure YMC 30% loss at OD=1; Display life calculation: Total Intensity/(500 lux x 10 hours x 365 = 1 year). 
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Shock 
or Flash 


...which do you need? 


With more new features and functions 
than a truckload of Swiss Army knives, 
an increasing number of new-media 
newcomers are asking... “which does 
what and should | really have both?" 


; t's a highly valid question. powerful options for delivering rich, 
Hit People seem to be confused interactive content online, but where 
‘i by which Macromedia one leaves off and the other begins 
: technology they need to sometimes blurs. The reason this 
develop the content they want. perception exists is because a clear 
Macromedia has two amazingly line doesn't exist. Let’s back up a little... 


haheSnonsral a | 


Macromedia Flash started life as a product mainly used for 
adding little bits of animated content to Websites (rollovers, 
animated icons, and the like). Director, on the other hand, was 
used for large-scale multimedia applications such as gaming 
content and its primary delivery medium was CD. 


A natural process of evolution 


With the Web evolving rapidly, Macromedia focused both 
products on authoring interactive online content with each 
exploiting its unique benefits, and with each subsequent 
version of both products we've seen the clear dividing line 
between the function and purpose of each application 


gradually fade. 


Macromedia Flash 5 now has support for XML to enable 
sophisticated e-commerce, a JavaScript-based scripting 


dT EEO Bee 


Check out Madonna's single at [w]www.shockwave.com (which features the one and 
only Ali G, incidentally...) - the presentation was built with Flash. 


environment to enable developers to customise the interactive 
content, and powerful authoring capabilities. Director 8 
Shockwave Studio, on the other hand, has come a long way 
from the product's early versions focused on CD-ROM 
delivery and is now completely tuned to create sophisticated 
Web destinations. The Studio has drastically reduced the 
learning curve long associated with Director by simplifying the 
authoring process, but there's still an enormous amount of 
Customisation power under the hood, thanks largely to Lingo, 
its own programming language. 

So, Flash keeps pushing its boundaries, enabling its user 
base to do more and more with the product, while Director is 
reaching beyond its traditional multimedia heartland to the 
burgeoning world of Web development where its simplification 
of the Shockwave authoring process is greatly appreciated. 


fancy footwork. is 


Lexus recently launched its [w]www.lexus.com Website 
containing both Flash and Shockwave content. It used Flash for 
the main user interface to the site, the quick-loading menus 
with MP3 sound, and the highly impressive interactive feature 


tours of the car — all the basics of a good, high-end product 
promo, in other words. Within the site, however, Lexus has a 
unique feature which, courtesy of a Shockwave editing bay 
application, allows site visitors to create their own Lexus 


commercials by selecting from 67 video clips, 52 stills and 
14 music soundtracks, as well as adding their own text and 
effects on top of the video. This example clearly delineates the 
relative strengths of Flash and Shockwave. 


inside every IS 300 is an idealist that believes you are a 
race-car driver. The 215-horsepower engine, the rear-wheel 
drive and E-shift were all packed into this machine to 
create a driving experience so intensely pleasurable, you 
may feel like lighting a cigarette afterwards. 


1S 300 Commercial Edit Bay 


Welcome to the state-ol-the-art 
($300 Edit Bay, With dozens of 
| this may be as close as you'll ever 
|_get to making your very own spot. 


Click on a link below 


NEW VISITOR RETURNING VISITOR TROUBLESHOOTING 


Lexus — not the cheapest car on the market by any means, so the Websiteat [w]www.lexus.com has a 
lot to live up to - a clever combination of Shockwave and Flash does the trick 


In other words, it’s been a process of natural evolution, but 
as a result of this expansion of capabilities and boundaries the 
fog of confusion surrounding the ‘Flash or Shockwave content 
— which do we need?’ decision thickens. 


Play to the strengths 


The trick is to focus on the unique features you need for the 
content you are trying to create, and not the overlap. Each 
product has its own strengths, and developers are going to be 
most productive when they come to rely on those strengths. 
Examples of the broad range of Flash content include: 
animations, presentations, navigational elements— such as 
buttons and menus — complete Website interfaces as an 
alternative to HTML, and Web application front-ends such as 
as e-commerce storefronts. Examples of Shockwave content 


include: product simulations, high-performance games, 
custom-rich media applications, Internet kiosks and other 
Web applications requiring maximum functionality. You can 
see how Lexus clearly uses both technologies on the same site 
on page 22. 

The terrific shockwave.com, an entertainment site spin-off 
from Macromedia, is another place where you can find a lot of 
intermingled Flash and Shockwave content. Despite the name 
of the site, users are greeted with user interface elements 
created entirely in Flash, and the Shockwave content is 
primarily found in the gaming and puzzles areas, where the 
sophisticated interactivity and logic of Shockwave work comes 
into its own. Although, if you take one look at some of the two- 
to three-minute long shows created in Flash, with their MP3 


sound, perfectly synced dialogue and ability to be played 


The Cartoon Network UK - from Flash to Shockwave and back to the start again... 


The entertainment industry is an area where the Flash and 
Shockwave technologies have been adopted and used 
enthusiastically. The Cartoon Network UK at [w]www.cartoon- 
network.co.uk uses Flash heavily throughout the site for user 
interface and quick-loading menu bars, which provide the 
visitor with site interaction from simple rollovers to click-and- 


drag. In keeping with the TV station, the site offers users movie 
clips and sound bytes, which are accessed by opening a 
QuickTime plug-in from within the Flash environment. The 
‘Play This’ section uses a Flash interface to allow you to select 
aseries of Shockwave games, each game offering the user 


real-time interaction and catering for varying levels of ability. 


The site uses Shockwave for its destination content because it 
enables the games to run off the host's computer, thus the 
power of their processor and not the Internet is used to power 
the graphics Visitors will therefore download the plug-in and 
make all-important repeat visits to the Cartoon Network once 
the content is viewed. 
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full-screen with no loss of resolution, you will quickly 
realize that the product is by no means exclusively for 
navigation and user interface, either. Many shows simply do 
not require sophisticated programming logic, so Flashis the 
obvious solution. 


Their strengths are their differences 


With each individual technology boasting its own media 
player, this is also a consideration for some developers. The 
Flash Player is currently installed on 92 per cent of Web 
browsers, and the Shockwave Player 52 per cent. The apparent 
imbalance in favour of Flash shouldn't be misread, however: 
Flash is often integrated into user interfaces, splash screens, 
banner ads, and navigation of sites, whereas Shockwave is 
used more for destination content such as games and movies 
within the sites, so the demand for Flash Playeris obviously 
likely to be greater. 

The Shockwave Player can also be extended by third 
parties to accommodate additional functionality. Macromedia 
and Intel recently announced they are working together ona 
future Intel Internet 3D Graphics-enhanced Shockwave Player 


Each to its own... 


Presentations 


ays —— 
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US comedian Wayne Brady made extensive use of Shockwave to create an ‘improv’ feel 
(he stars in the US version of Whose Line Is It Anyway) to the live chatroom area. 


that will enable the next generation of bandwidth-friendly, 
high-quality interactive games, engaging entertainment, and 
more intuitive online shopping. The Shockwave Player can also 
be used in multi-user settings, such as chatrooms and multi- 
player gaming. An example of cutting-edge Shockwave 
content can be found at comedian Wayne Brady's new site. 

Brady, known for his improvisation skills on ABC’s Whose 
Line Is It Anyway? (that's the US version, by the way — no sign 
of Clive Anderson, Tony Slattery et al), held a live improv 
concert online, whereby he controlled Shockwave content that 
enabled him to switch settings, costumes, and other visual 
content. At the same time, the Shockwave Player, enhanced 
with HearMe VoiceXTRA, let site visitors listen and speak to 
Wayne in real-time, preserving some of the feel of a live 
improv event. Check it out at [w]www.waynebrady.com. 

To sum up, Flash and Shockwave go against society's 
politically correct stance that we focus on how things are the 
same, not different. That view of the world doesn't help when 
creating interactive Web content. When it comes to figuring 
out whether to use Shockwave or Flash, finding and exploiting 
that difference is the key. EX 
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Just beyond basics 


Freaked by the idea of programming, but need to 
push your Flash powers past the simple splash 
screens and animation stage? Then have a look 
at this because we know you don't like scripting 


lash-powered sites are 

everywhere. And surprisingly, 

considering just how powerful 

| the program is, a lot of those 

sites aren't using Flash to anywhere near 
its full potential. While splash screens and 
spinning logos are all over the place, it’s 
more difficult to find sites that offer real 
user interaction. 

You're not confined to creating 
straightforward click-and-go Web pages 
either. Flash’s scripting features are only 
limited by your imagination and ability. 


True, to build very complex applications 
you will need some background in 
programming, maybe even a dab of 
physics, but you can still get good results 
with some basic skills. 

In this tutorial we're looking at the use 
of Symbols and re-usable Library items to 
build up applications that can be 
controlled through the smallest amount of 
scripting. Along the way you'll learn how 
to organise Actions and properly label 
events in movies, ready to take on more 
complex tasks in the future. 


Magic 


Torch {t] 012 


orch.co 
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The arrow icon was constructed by copying 
and pasting the circle section twice, rotating it 
about 20 degrees and recolouring one piece. We 
were then able to use it to ‘slice’ the second pasted 
section. The arrow head is simply a rotated, 
scaled-down circle section. 


However you create your own arrow, place it 
within the quarter circle pointing down, then 
drag the cursor to select all the components. Go 

to Insert>Convert to Symbol. Name the symbol 
‘spinbutton' and choose Button as the Symbol type. 


Click on Scene 1 in the top left corner of the 
Button-editing screen to return to the main 
movie. Then go to Window>Library to open the 
Library for the current movie and see the Button 
Symbol you've created. You can drag and drop as 
many independent instances of this button into 
the movie as you like. 


Select the arrow icon, and using the Fill tool 
recolour it in the Over frame. You can even add 
further states if you want, or simply edit other 
attributes of the button. 


G Click the Edit Symbols icon in the top right 
corner of the Stage and select ‘spinbutton’. Click 
within the Over frame and go to Insert>Keyframe. 
Alternatively, right-click in Windows or Ctrl-click on a 
Mac to bring up the context-sensitive menu and 
choose Insert Keyframe. 


Go to File>Save As and save the movie as 

mybuttons.fla in the Libraries folder of the 
Flash application folder. When Flash restarts, this 
library will be available from the Libraries menu. In 
future, when you need to create new buttons, open 
the original file and create them there. 
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Part 2: Interactive Movie Clips 


Flash doesn't have to be completely time-based. You can easily use Movie Clip symbols 
to take control of the animation action... 


Open as library 6 | 
If you don't want a custom library 
available every time you open | 
Flash, save it to a folder other 4 
than the Libraries folder and use - oa = = 
File>Open as Library to access it I 
when you need to. You can open Z1A 
any Flash format file in this way. + 
2 li movie clip we're creating here is a simple 
ay Movie Clips are a type of Flash Symbol that © animation with embedded Actions and Labels 


can include animation. They are basically that we'll need for the final stage. Begin by drawing Use the Line tool to subdivide the circle 
mini-movies. Using Movie Clips in Flash movies a circle in anew movie about 190 pixels in diameter. randomly. Delete any areas of line which 
makes it easier to keep the main timeline organised, Use the Height and Width boxes in Window> Te the edge of the circle. Using the Fill tool, 
and also gives you enhanced scripting control. Inspectors>Objects to adjust the size of the shape. colour the new sections of the circle differently. 


Place keyframes at Frames 15, 16 and 31. Select 
the keyframe at Frame 1 and double-click it to 


Now choose Edit>Select All, and then go to 


Insert>Convert to Symbol. Name the new In the timeline, add two new layers. Name one _ bring up the Modify Frame dialog. Change Rotation 
Symbol ‘spinnyscope' and set its type to Movie Clip. Labels and the other Actions. Rename the from Automatic to Clockwise and then enter 1 in 
Click on the Edit Symbol icon in the top right corner _ existing first layer ‘disk’, Select the first keyframe in the _ the Times box. Select Frame 16 and set tweening 
of the stage to edit the clip. ‘disk’ layer, then go to Insert>Create Motion Tween. rotation Counterclockwise, 1 time. 


7 | Now place blank keyframes at Frames 2, 15, Select the keyframe at Frame 15 and go to 
16, 17 and 31 in the Labels layer. Double-click Q Modify>Properties. Add a ‘Go To' Action, and 
on the keyframe at Frame 1 in the same layer. In the In the Actions layer, double-click on the check the selector marked Label. Type ‘clockloop’ in 
Label enter the name ‘park’. Then repeat the same 8 | keyframe at Frame 1 and go to the Actions tab. _ the box and make sure Control: Go to and Play is 
process to name the other keyframes as follows and Add a Stop action. Add a blank keyframe at Frame checked. At Frame 31, add an Action in the same 

in this order: ‘clockloop’, ‘clockend', ‘coclockstart’, 16 and do the same. Finally, add further blank way that reads Go to and Play (‘coclockloop’). Now 
‘coclockloop’ and ‘coclockend’. keyframes to the Actions layer at Frames 15 and 31. _ save the movie as disk.fla 
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Part 3: Using libraries and Tell Target 


By using Flash libraries and the Tell Target ActionScript command, it's extremely easy 


to gain precise control over your movies... 


Object-oriented 


Once you get used to using Movie 
Clips you'll find that the main 
animation timeline will be far 
less cluttered! Movie Clips 
enable you to control animation 
in a more organised way. 


Label liberty 


Use a Label layer to add labels to 
key events in Movie Clips and in as ET | 
the main timeline, even if you 
don't need to refer to them in 
ActionScript. It'll help you keep 
track of what is happening where, 
especially when you have to 
juggle several Movie Clips ina 


single movie. First we need to start a new movie in Flash. 


Go to Modify>Movie and set its dimensions to 
550x250. Go to File>Open as Library and open the 
mybuttons.fla file you created earlier. Repeat the 
procedure for the file disk. fla — or, just open the 
versions at [w]www.computerarts.co.uk/cdrom 


4 | Select the layer spinner2 and add a second 
instance of the Movie Clip spinnyscope. Centre 
the clip in the movie and name the instance ‘spin2' 
in the same way as you did previously. In Modify> 
Instance, go to Colour Effects and set the alpha level 
of the clip to 50 per cent. 
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7 Next, add a Go to and Play Action, then type in 
‘coclockloop' as the label to jump to. This 
sequence first targets a unique instance of a named 
Movie Clip (spin2), and then plays that clip from a 

specified point (coclockloop). 
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In the timeline, add three more layers. Now 


you'll need to name them: call the bottom layer 


‘background’, the layer above that one ‘spinner’, 
the next ‘spinner2' and the top layer ‘buttons’. 


Select the layer ‘buttons’ and go to the Library 

palette containing the Button we made earlier. 
Drag and drop four instances of the Button to the 
movie. Next, arrange the Buttons as shown using 
Modify>Transform>Flip Vertical and Flip Horizontal 
to re-orient the Buttons and create a circle. 


8 | In the same way, add an Action to the 
top-right Button that triggers clip instance 
spin2 to jump to clockloop. The bottom left Button 
should trigger coclockloop in clip instance spin1 and 
the bottom-right clockloop in spin1. 


Select the layer named spinner1, then drag and 

drop a copy of the Movie Clip spinnyscope to 
the work area. Use Modify>Align to centre the clip 
exactly on the stage. Go to Modify>Instance and 
name the clip instance ‘spin1’. 


G Select the top left Button and double-click on 
it, or go to Modify>Instance. In the Actions 
dialog, add an On MouseEvent action and choose 
Press. Below that, add a Tell Target Action and 
double-click on spin2 to select the Target Clip. 


Patent Kaleidoscopic Gizmo 


Save the movie and choose Control>Test 
Movie from the menu. Using the Buttons starts 
the appropriate disk spinning in the direction the 
arrow is pointing in. Also, because the alpha 
transparency of the top disk is 50 per cent, it 
causes a kaleidoscope effect. TEI 
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Shockwave Basics: 
the Interface 


It's not a fix-all, but good Shockwave will get you 
©) Mituateemuesse noticed —so get started here with the basics on 


folder catted duat\tutorial\shockstart 


oe animation, navigation and image compression 


demo version of Macromedia's Director 3 


in the macsoft or pesoft folder. 
hockwaving your site can l animation and embedding font maps. The 
create a dynamic content | files you need can be found on the cover 
environment that willgrab | CD, and can be opened through Director. 
Pes sce estes available and hold your visitor's | Using Shockwave will require the 
ft] 020 83585857 More info can be attention. This tutorial will go through the | Shockwave plug-in which is freely 
found at{w] wwwmacromediacom basics of image compression, simple | available at [w] www.macromedia.com 
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download. The finished site can be viewed 
at http://www v-42 demon.co.uk. 


This is how you should see the file as it's 

opened from the CD. In the cast you'll see the 
images, behaviours and scripts in the movie and be 
able to see the layout on the score. The images on 
the stage are called sprites; if you click on one of 
these, an information box will appear with sprite, 
script and cast information. 


keep the amount of images 


~ toaminimum 


Site text can be written in an external 

application and imported or copied-and- 
pasted into your movie. There are two ways to 
display text in Shockwave depending on how it's 
being used. Here we just want a text box with a 
brief introduction, so we've made it a text cast 
member, thus allowing us to embed a font. 


Double-click on the text cast member to edit 


the text; if you want to change font click 
Modify>Font on the menu bar to bring up the font 
options box. Here you can adjust font, size and 
colour. There are further options on the property 
inspector. Click on the sprite tab to adjust the ink, 
then click on the text tab for more options such as 
anti-aliasing. 


Part 2: Building the page in Director 
The Director stage is great for layout with a simple click-and-drag positioning method 
for your sprites. Open the file called gallery.dir to see the keyframe animation... 


1 | After importing all files you'll find them sat in 
the cast — to get them to the stage, simply click 
the cast member you want and drag it onto the 
stage. You can now move it wherever you like. If 
you drag the member into the score it will 
automatically centre the sprite to the stage. 


Q Once you've positioned all the sprites, it's time 
to add some animation. To do this, click on the 
score then Edit>Select all; the sprites appear as blue 
lines with a red marker showing your position. 
Move this along to the end of the sprite and insert a 
keyframe, (Insert>Keyframe). This now means we 
can move the sprite around in the movie to create 
our animation. 


3 | To make a sprite move across the stage, click 
once on a sprite - you should see it highlighted 
in the score. Next click on the sprite in the first 
frame of the score and move your sprite to another 
position on the stage. The picture shows the sprite 
paths created in this way. 
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Wisprite 17: (153,74 397,126) Begrd Transparent st 
The text for the index movie is done in a 
similar way — this time we use the Property 
Inspector to adjust the blend. On the first frame we 
set the blend to0% and then 100% at the end. 
For this text the ink has been set to Background 


Transparent so the image can be seen sliding 
behind the text. 


G Text is often overlooked, with fonts not being 
embedded or anti-aliased. Select the text by 
double-clicking, then go to the Property Inspector 
and click the text tab. Select all text from the Anti 
Alias menu - this will vastly improve how your text 
will look on the Web. 


| newFonename: [freed] | (we) 
nna ont: ' Comet) 
Cee) 


Not everyone will have the same fonts you are 

using, and this can completely change the look 
of your site. To embed the font you need to make it 
into a cast member — this will change your text to 
bitmap once published (Insert Media Element> 
Font). Choose your options and OK it. 


Part 3: Adding the Lingo 


Lingo is the language behind Director and has the power to control the 
contents of any movie. In this project you only need to know the basics... 
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0 ==> behavior Script6 =18 


@ Open file index.dir. Play the movie; you'll 
notice it stops at a certain point; this is due toa 
Lingo command telling it to stop and repeat on that 
frame [go to the frame]. The [roller] is a handler 
command, when the movie gets to this it looks fora 
script with that handler. This is a score script. 


It's always nice for something to happen ona 
rollover, even if it's as simple as a change in 
cursor. This script changes the cursor from an arrow 
to a finger and back. Within Director there are 
several built-in cursors available and, as you become 
proficient, you can create and import your own. 


ae > ie 


———— in 


set the visible of sprite 4 to false 
set the visible of sprite 5 to false 
set the visible of sprite 6 to false 
set the visible of sprite ? to false 


end 


t 
The [on startMovie] script, in this case is set to 
hide four of the sprites at the start of the 
movie. These sprites will become visible on a button 
rollover and display the section link. The startMovie 
can be used to create the various commands and 

globals you want in your movie. 


OG ——___ Behavior Inspector ——— 18 
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cursor (lente = 
17 (internat) (not a behavior) 


5 | The Behaviour window shows you what 
behaviours are connected to sprites and also 
enables you to create your own with relative ease. 
In the top right-hand corner you'll see a small script 
button which will allow you to view the script. 


This is as complicated as the Lingo gets in this 

project; it's basically the handler that appears in 
the score script. It refers to a mouse rollover, so if it 
rolls over Sprite 20 then Sprite 4 will become visible. 
You can check which sprite is which by looking in 
the score. 


os ibe @ 5 [internal] Bitmap. 
Welcome to gi rc 

Shockwave tor wel tbat Ale 5 
will demonstate simpiGeontamtidh and 
navigation, as well sare , - 
‘optimise your graphics for speedy 

download. The finished site can be viewed 

at http://www .v-42.demon.co.uk. 


Script of Cast Member & 
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‘on 


] 

| gotonetpage “http://w .v-42.demon.co .uk ‘madame /gat Lery.htmi" 
end 

| 


G To keep file sizes down, you can build each 
page as a new movie. To connect to each one 
you need to know your Web file structure; this code 
links to each of the pages. Here you have a choice 
of either writing a behaviour or, as in this example, 
attaching a script to each sprite. 


Part 4: Optimising the graphics 


Images will increase the size of your movie, so it's a good idea to optimise them by cutting 
down colours and file size — the trick is to do so without compromising quality... 


Exhibition. 


|Exhibition information. 


\To see the completed version check 
\furthur tutorials go to the computer 


| { Optimize in Fireworks... »! 


{tow compara co.uk | Alpha Click Threshold: 


Alpha Click Threshold: 


raiment Transparent Opaque | Transparent Opaque 


Firstly select the image you want to optimise — 
this project is based on the photographer 

Madame Yevonde, so image quality is important. 

The idea is to get the images as small as possible; in 

this project the final Shockwave files are only 36k. 


When you have selected your image, go to the 
Property Inspector and click on the bitmap tab. 
You'll see there are a few simple image optimization _ selection of options. With time it is possible to halve 
functions that allow you to adjust the image type; the original file size of your movie, but it's generally 
JPEG, GIFF and also the quality percentage. a little experimental at first. 


Here you can also link the image straight into 
Fireworks which will give you a greater 


Fionn oo sue (wea mte oa Tg 
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as 
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G When you've decided which image you feel 
best suits your site, check that you have it 


G At the bottom of the window you'll see three selected and press update; this will optimise that 
| 4 | When you first get into Fireworks your image boxes — these let you compare the original graphic. It's possible to batch-optimise your 
will appear centrestage with info such as file with up to four optimised images. If you decide to graphics once you have found settings that work 
size and download time. For a photographic image, use a JPEG image you can reduce the quality and well for you. It's a good idea to check different 
start by shifting through the different saved settings. then use smoothing to get the file size right down. 


images as different colours will react very differently. 


Part 5: Building the rest and actual Web navigation 


Organising your site for the Web and getting the right links to each page can take a while. 
In the next section we'll look at publishing your files, but first we need to get the order... 


Ba | serie: Cnurneit201 Frames te 281 


Place your files in such a way that it leads with 
an index file. In this example, to keep things In Director select the button that you want to 


neat create a folder for the menu pages such as 
Contact and, within there, another folder for any 
extra files. In this case, put the gallery pictures in the 
Images folder. 


launch into the next part of the Website. Open Asmall dialogue box will appear for you to 
the behaviours window — Window> Inspectors> enter the name of your new behaviour. This 


Behaviour>Inspector — and click on the + button to example will link to one of the gallery images so call 
create a new behaviour. it Image 1 and OK it. 
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4 | Creating the behaviour is easy — click the 
second + button directly below the first and 
select Mouseup. On the mouseup event, it will look 
at the action that is to happen. Click on the action’s 
+ button and choose Navigation>Gotonetpage. 


Go to Net Page: [a 


G Another dialogue box will now appear. In 
here type the URL of the page you wish to 


connect to and press OK. If you play the movie and 


click on the button to which you assigned the 
behaviour, it should launch your browser and go 
to the Website. 


G All the Behaviour Inspector is doing is writing 
the script for you so you don't have to bother. 
The files on the CD have a script attached to each 

sprite, but you can use them either way. 


Part 6: Integration and publishing 


Putting everything together and preparing it for the Web... 


MEF fie 
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Save As... 

Save and Compact 
Save All 
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import... BR 
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Page Setup... O8P 
Bie BE icture Gallery, click image to enlarge. 
[ico] Preferences >| 


= Recent Movies > 
ELE} recent casts La: 


ot 
| Lo a |) C0 


gf Director now has a built-in publisher which 
will create the HTML for your Shockwave 
movie. There are several options for the way your 
site can be shown, so it's worth taking a look 
through the settings (File>Publish). If you've used 
vector graphics, there is the option to Fill Browser, 
but for a site such as this you lose all image quality. 


4 | You can check out the HTML code through 
the browser, or in any Web authoring program 
if you need to adjust anything. The Shockwave files 
will require the correct plug-in. If a viewer doesn't 
have this installed, it will automatically direct them 
to the Macromedia Website. 
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Bheckwave Fie: [pattery dor 


Outpot: BB View in Growser 


The first section of the publishing process is 

Formats — this lets you name your HTML and 
Shockwave files and adjust how it will embed itself 
in the HTML. If you choose Centre Shockwave, it 
will automatically place it into a table. 


| 
f New > en ie 
Sl go eas) lal («I 
Close #W Jallery Stage (100%) —— = 

)] save *S 

Save As... 

Save and Compact 

Save All 

Revert 

Import... BR 

Export... OR 


Publish s 
® revi Browser 


] Create Projector... 
Publish Settings... 


Page Setup... O%P 
Print. P 


_—————— 


Recent Movies Sree Se 
Recent Casts > Hternalcast si Cast 


o Check through the other options, and when 
you have finished, OK the settings and choose 
File>Publish. This will run straight from the menu 
and create the files with your raw .dir file. After 

it has finished doing this, the page will be displayed 
in your browser. 


tate Gary ch nage enee 


To load your site to the Web, you'll need an ftp 
program — we've used Dreamweaver's here. 
Add your site details and let it go. 


G The finished result! Each page is around 40k 
and, provided that your visitors have the 
Shockwave plug-in, it should be a fast-loading site 
with smooth animation. EEE 
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Fancy Flash interface 


Never touched Flash before? Or maybe you want to brush up on 
the basics? Follow this tutorial to design a basic Web page with 
animated and interactive elements, in minutes... 


or the last three years 
( Macromedia’s Flash 
technology has been 
revolutionising the way 
information is presented on the Web. 
Understandably it’s had a massive impact 
on Web design, information design and 
interactivity on the Internet; and everyone 
who isn't into Flash yet wants to be. 
Those who were there when the first Flash 
tools hit the scene are now masters and 
many trained animators have now also 
turned their talents to the vector 
animation medium. However, unlike other 
design media, it’s relatively easy to break 
into the Flash community. The application 


is relatively accessible and you can 
produce effective results quite quickly. 

To get you started if you’ve bought this 
Computer Arts Flash Special specifically 
to learn the application, we've prepared 
the following walkthrough to guide you 
through some key, basic Flash design 
skills. It will quickly take you through the 
process of creating an interface, adding 
animation, defining an animated 
navigation system, adding audio, creating 
a loading screen and putting the whole 
thing together. After you've completed it, 
you can add more pages to your site using 
these methods, or move on to our other, 
more advanced tutorials. 


202147 Iw www.mas! 


ictorch.com 


4 | Using the Gradient tool, create a green 
gradient and click New to add it to the 
palette. Use the Paint Bucket tool, (press U on the 
keyboard), to fill the window border with the 
gradient colour. 


5 | Select a font using the Type tool and type in 

your name or the name of the project. Zoom in Select each letter, and use the Rotate tool to 
using the magnifier. Select the Text object, and then rotate the text to fit along the curved line of 
click Modify>Break Apart. Then select each letter the window. Place each object along the line, 
and click Modify>Group. tweaking it until the word is easy to read. 


Part 2: Background animation 
What you really need is a UFO buzzing around in the background... 


Nd We want to have a UFO flying around in the 
background. You can start to draw your own 
alien, or you can import the one on the cover CD. It 
doesn't have be too detailed as you won't be able to 
see it up close. 


e Select the UFO, then click Modify>Group. 

While it's selected, go to Insert>Convert to In the movie clip, insert a keyframe at frame 
symbol and give it a name. The floating UFO needs 400. Then select the first layer and click 

to be in a movie clip, but the UFO needs to be a Insert>Motion Guide. This adds a new layer above 
graphic symbol. Convert the symbol into a movie the current one called Guide:Layer 1. This will hold 
clip using the Insert menu. the path that the alien will follow when moving. 
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li E : 
4 | Select the motion guide layer, and using the 5 | Go to Keyframe 1, and select the UFO symbol. G Select the first keyframe in the first layer. Go 
Freehand pencil tool, draw a big curved line Make sure the Snap is turned on in the View Modify>Frame. Click the Tweening tab. 


(as shown). This is the path which the UFO will menu. Drag the UFO to the start of the path line, Tweening will make the symbol ‘slide’ along the 
follow. To draw a curved line, change the Pencil tool —_ making sure it locks in place. Do the same to the last — path. Change the pull-down menu to Motion and 
line type to Smooth. keyframe, locking it to the end of the line. then click OK. 


Part 3: Animated navigation 


For the navigation, we will have a menu that slides 
down when the mouse goes over it... 


Py Are) yom eet 2 
IF sees ssi 
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: Insert>New Symbol to create a movie clip called 
G Next, use the arrow pointer to select the text Menu Structure. Insert 3 keyframes, at Frames 


et 
and green menu bar that is to be abutton, and —_ 1,10 and 20. Frame 1 will hold the closed menu bar, 
a The first step is to draw the menu bar. Using turn it into a button (Insert>Convert to Symbol). Frame 10 the menu bar opening and 20 the movie 
the drawing tools, draw the main bar. Using Give it a name that will be easy to remember. clip of the menu closing. Give them a label by going 
the Text tool, insert the names of the buttons. Repeat this step for each of the buttons. 


Modify>Frame and clicking the Label tab. 


It needs an invisible button that sits around the 

outside of the menu, that when you roll over 
it, closes the menu bar. Go to Insert>New Symbol 
and create a button called Close Menu Target. Draw 
a box and then cut out the menu-bar shape from 
the box on the over state. 


Next we'll animate the menu bar down. Create 

a movie clip, and use a motion tween to slide 
the menu downwards. Create a new layer, and 
modify the properties to a Mask. Draw a mask that 
hides the menu before it slides down. Look at the 
source file as an example. 


Keyframe 1 in the Menu Structure movie clip 

holds the button of the menu closed. Select 
this button and go to Modify>Instance. In the 
Action tab, put an On Rollover action, followed by a 
Go To statement to the label Open Menu. Tell 
targets can then be used to link to the pages. 


Part 4: Adding audio 


To liven the up the site we want to add 
some sound effects to the buttons... 


We need a sound on/off button. Create a 

movie clip with two main keyframes. Draw a 
button using the text and drawing tools. Insert the 
graphic on the two keyframes. Give the keyframes 
labels; Sound Off and Sound On, for example. 


ee We'll now add a small background sound 
loop. First, import some samples from your 
hard drive (.wav files usually). Go File>Import 


In the Library (Window>Library), select one of 

the buttons on the menu bar and go into 
editing mode. Click on the Over state frame and 
bring up the frame properties. Just like in the last 
stage, choose a sound to play when the mouse 
highlights a button. 


You can also add a sound to the animation of 

the menu bar opening and closing. To do this, 
open the movie clip of the menu closing. Insert a 
new layer called Opening Sound. Insert the sound 
effect on the first keyframe of the movie clip. 


On the first keyframe of this clip, put in a Stop 

action. Also, go to frame properties and choose 
the Sound tab. Choose the background loop you 
have imported from the pull-down menu. In the 
loop box, type in a high number. Link to the Sound 
Off frame, (which contains no loop). 


G Something to look at is the sound properties 
when publishing a movie. Go to File>Publish to 
bring up the settings. Click the Flash tab. There are 
two buttons called Set. These allow the compression 
rate and the quality of the sound to be altered 
before exporting the movie. 


Part 5: Creating a pre-loader 


Creating a simple loading bar really is very straightforward... 


* 


SASS 


My Creating a simple loading bar is easy. Hold ~ 
Shift, and select every keyframe on Frame 1. e Using the drawing and text tools, draw a 

Click Insert>Blank keyframe to add a new keyframe simple loading bar rectangle. Select the 

to hold the loading bar. Add some more blank rectangle and turn it into a movie clip called ‘Movie 

frames before the main content, to separate it from Clip Loading Bar’. To do this, go Insert > Convert to 

the first frame. symbol and enter the name, as shown. 


3 | In the main movie, select the first keyframe 
and go to Modify>Movie. Click the Actions 
tab. Select ‘If’ from the pull-down box, and use the 
Expression editor to bring up the shown box. Use 
the built-in variables ‘framesloaded’ and 
‘totalframes’ as shown. 
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4 | Still in the Actions tab, use the pull-down box 
and select Go to. You want to go to the Start 
label in Scene 1, as shown. Select the ‘If statement, 
and click ‘Else’ in the pull-down. Then choose Set 
Property and choose X Property of the loading bar 
symbol, as shown. 


G To test that the loading bar actually work, click 

Control>Test Movie. Then click Control>Show 
Streaming. This will not only enable you to see how 
long the site takes to load on different modems, but 
also makes sure that the loading bar works. 


The screenshot above shows how it should 

look. It looks to see if the last frame has 
loaded, and if it hasn't, it stretches the loading bar 
movie clip horizontally, based on the number of 
frames that have loaded. For this to work, you need 
an action on Frame 2 that says ‘Go to frame 1’. 


Part 6: Final touches 


Now that the site is finished, it’s time 
to publish it, ready for the Internet... 


@ First, remove any unused graphic or movie 
symbols from your library to speed up the 
download. Then Control>Test Movie to test the site. 


So aad i 


4 | Click the Formats tab. This selects the formats 
for which the movie is going to be exported. It 
can create compiled Flash files, but also animated 
GIFs, QuickTime movie clips and more. Select the 
formats to which you want to export. 
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3 | Still in Publish, click the HTML tab. Here you can 
change the movie of the site to an exact fit or 
100 per cent of the browser window. The alignment 
of the movie on the page can be changed, as can the 
quality of the movie and background colours. 


Then go File>Publish Settings. Click the Flash 

tab. Check the Protect from Import box to stop 
visitors importing the site into Flash themselves. Put 
the JPEG quality on 100 and make any necessary 
changes to the quality of the sound. 


G Once it has finished exporting the movie and 
publishing the HTML files, load the HTML to 
view the finished site. It is worth testing the site on 
various browsers and screen resolutions to make 
sure everything works OK. 


You can also turn it into a self-running 

executable. Load the Flash file (.swf). Go to 
File>Create Projector, then choose were you would 
like to save it. This can be then sent to your friends 
on CD or via email, but don't forget to add some 
credits atthe end. [ES 
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Title: Old Fellas 
Artist: Robert@trebledee.com 


Behind every good artist... 
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“The day it c 


ame out, the Internet got sound, movement and 


interactive content — very cool. Shockwave is still the best tool 


> 


nteractive menus on the street, live content 
DVDs and X-ray views of latest fashions are 
just a few of the Shockwave, Flash and Java 
projects undertaken by new media masters, 
tomato interactive. With a high-profile portfolio 
featuring Levis, Mitsubishi and Underworld, tomato 
were asked to put their expertise to use as judges this 
summer at the Apple Keynote conference in Paris. 

“We just want to do the best work possible,” says 
Anthony Rogers, Director. “With a new project, we each 
play around with individual aspects. We then share the 
ideas and the whole thing moves on. It’s fun...” 

The interactive elements of the Everything 
Everything DVD featuring a stunning array of music, 
digital art and concert footage from dance band 
Underworld was an interesting challenge: “We wanted 
the video and audio to run on home DVD players, 
PlayStation 2, Windows and Mac OS,” explains 
Anthony. “Seeing the whole process come together has 
been great, from video though to sound, then down to 
DVD. The interactive content is made up of everything 
from a visual mixer and audio space to live updating 
links. With the live content loader we can add more 
things every day — it’s going to be great fun.” 

Those looking to gain from tomato’s boundless 
creativity are open to new ideas and perspectives for 
their products. An interactive menu was part of the 
deal for London restaurant, Busaba, on Waldour Street, 
“It's a very mad, audio-reactive system. Go have a 
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he flet today”: sauce and savvy from tomato interactive... 


shout at it, see what happens... it uses an audio input 
levels Xtra for Director which enabled us to grab the 
levels of sound from the street.” 

The Levis-ICD+ site uses a navigation system that 
shows the clothes from all angles including inside with 
an unusual X-ray view, and when it came to the 
Mitsubishi sites, Wakowako and Tokitoki, it was Flash 
and the Shockwave Multi-user server that helped 
create the multi-player elements in the chat space. 

Shockwave has long been an integral design tool for 
tomato. “The day it came out, the Internet got sound, 
movement and interactive content — very cool. 
Shockwave is still the best tool for the Net today. It can 
do all the things anyone would want, even 3D soon. 
Director is a content manager with a very solid 
programming interface; it can import and play nearly 
all media content these days. Flash 5 also looks very 
rocking now the scripting is stronger.” 

Enthusiasm for all aspects of the Web goes with the 
tomato territory. “| love that old school look of 
background images that obscure the text, silly 3D 
logos and firing torches,” says Anthony. “It's good fun 
and that's what it has to be.” No doubt new project 
partners Sony will be looking for something more 
daring in the next venture, as yet to be unveiled... 
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1. Busaba: Using Director, the animations respond to sound input. This is a sound- and sensor-driven installation. The 
interface reacts to ambient noise when in an idle state; animating and wobbling the images. Other than that, a sensor 
reacts to user interaction, bringing up menus and sonic branding. 


2. Flying letters in the chat room. The site uses Shockwave, Director and the Macromedia Multi-User server. It’s an 
experiential space giving the user/viewer the opportunity to experience the new brand identity of Mitsubishi Motors 
through play. The community experiences itself in the multi-user play of this site. Here, users can simultaneously chat 
within the browser using a typeface specially created for the ‘room’ by tomato. 


3. Made in Director, the programme uses proximity to pick up information on the nearest store while rolling over the matrix 
of the country’s shape. Also made using Shockwave. 


4. X-ray image; shot on a hospital X-ray machine in Belgium, these X-rays allow you to see the technologies that exist 
within the jacket. The overlaying image of the jacket was taken with an Olympus 3030 Zoom digital camera. The software 
used is Photoshop and Director Shockwave. Made in Director, the programme uses proximity to pick up information on the 
nearest store while rolling over the matrix of the country’s shape. Also made using Shockwave. 


5. tomato three: Director Shockwave and QuickTime were used to enable tomato to show the multitude of work that goes 
on in the tomato building. QuickTime movies of commercials, promos and titles can be moved through by the user, and 
windows showing interactive games, spoken text and the tomato portfolio can be opened and closed at will by the viewer. 


6. Underworld DVD: The first interactive DVD to work on a Mac. It contains 9GB of concerts, tomato art, interactive audio/ 
visual installation pieces, a keyboard-driven vision mixer and links direct to the internet; a link which will be updated daily 
to provide exclusive sounds and images from Underworld to those who own Everything, Everything. Allinteractive ROM 
content was made using Director. 
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Bring me music 


Creating a Flash MP3 clip player to access 
sounds clips from external files... 


h.com 
y www.magictore 
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ne of the best developments 

in Flash 4.was its ability to 

compress audio in MP3 

Wl format. Flash 5 builds on this 
by enabling you to directly import MP3 
files. Another new feature is the ability to 
export variables and text from external 
text files, meaning that you can update the 
textual content of a Flash-powered site 
without altering the original Flash file. 
The power of movie clips can be 

enhanced even more using the Load 
Movie command — the same command 
that enables you to import variables from 
external clip files. It can be used to load 


an entirely new Flash movie, but its real 
power lies in the fact that you can use the 
command from within a movie clip to add 
to or replace that clip. Essentially this 
means that not only can you access 
external text from within a Flash movie, 
you can also access animation, sounds, 
video and graphics. 

The technique involves treating movie 
clips not as autonomous animations, but 
as ‘containers’ for Flash Movies. We 
demonstrate how to go about it by building 
a Flash MP3 clip player that accesses 
both the sound clips and accompanying 
information from external files... 


Right-click or Control-click on the sound in 5 | Double-click on the first keyframe to access 
the library to access the export settings. This 


enables you to define how Flash will compress the 
file on export. Choose MP3 at a bit rate of 32kbps, 
leaving the final option at Fast. 


the properties for that frame. Click the Sound 
tab and select the sound you imported from the 
drop-down menu. Leave the other settings at their 
defaults and click OK. 


infowindow1=Octafish 
Tom Cat&infowindow2=Track No. 1 


Repeat the procedure with the remaining two 
sound clips to create Shockwave Flash files that 8 | 

are named clip2.swf and clip3.swf. Save them all in 

the same folder. Next, open up a Text editor like 

Notepad or Simple Text. 


In the Text editor, type the following exactly as 
it appears below: 

infowindow1=Sound Clip 1 &infowindow2=Track No.1 
Then save the file as text1.txt 


| 


Go to File>Export Movie and save the file in 

SWF (Flash Player) format. Name the movie 
clip1.swf. You'll notice that you can also set the 
sound compression option here, but as you have 
already done it within the movie, check the box 
that's labelled Override Sound Settings. 


Create similar text files for Clip 2 and Clip 3, 

naming them text2.txt and text3.txt 
respectively. Save them in exactly the same folder 
as the Shockwave sound clips. These text files 
contain named field variables that we'll be setting 
up in the stages that follow. 
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Part 2: Setting up variables and text fields 


Our clip player not only plays back MP3 files, it also tells you which files it's playing. 
So the next thing we have to do is set up the appropriate text fields. .. 


Directory directions 


For convenience sake we've put 
all our external media in the 
same folder. That's because ‘Test 
Movie’ mode in Flash 4 can't 
handle directory paths. If you 
plan to use similar external files 
on the Web, you can use relative 
or absolute URLs instead. 


Oe] 
lo] 
Zig 


(| 


Toploader 


Although Flash unloads movies 
automatically from the current 
level, explicitly adding the 
Unload Movie command speeds 


the process along, 


Pig Close all open movies in Flash 4, then open the Right-click or Control-click within the Text Field 


file background.fla (at [(w]www.computerarts. Select the Text tool in the toolbox, then click to access the Properties dialog. In the Variable 
co.uk/cdrom). Select the layer called ‘textfield’. In the Text Field button at the bottom of the box type ‘infowindow1'. From the Options boxes, 
Flash 4, Text Fields enable users to input text, or they __ toolbar. Drag and draw a Text Field box within the select Multiline, Word Wrap and Disable Editing, 
can be used to display text from an external file. larger LCD panel on the CD player illustration. then deselect the rest. 


Click OK and draw a second Text Field in the 


G Double-click the button on the stage to bring 
smaller LCD panel. Set the field up with the 5 | Select the Buttons layer, go to Window>Library, up the Properties dialog and click the Actions 
same parameters, but name it ‘infowindow2’ then drag and drop an instance of the button tab, Add an On Mouse Event action and select 
instead. Select the Arrow cursor and then select both called ‘genericbutton’ to the stage. Now you need Press. Next, add a Tell Target action and type 
boxes at once (by Shift-clicking). Choose the Text to position the button to the right of the smaller ‘/controller’ in the Target box. This is the name of a 


tool and set the font to Courier. LCD panel in the illustration, as shown above. movie clip instance that we're going to add later. 


Add a Go To action and choose Next Frame 8 | Drag a second instance of ‘genericbutton’ from 9 | Go to the Properties dialog for the new button, 
from the available options. The rest of the the library. With this instance selected, go to and in Actions, recreate the script you added 
script is then completed automatically. Now simply Modify>Transform>Flip Horizontal, then position the previously to the first button. In the Go To section, 


close the dialog by clicking OK. flipped button to the left of the smaller LCD panel. select Previous Frame instead. 
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Part 3: Loading and controlling movies 


All the components are now in place. The final piece is to add a single movie clip that 
will act as a container for changing elements and controlling interaction... 


Level best 


Flash movies can have many 
levels. In this application our 
sound clips are loaded into ‘level 
1’ —this exists above the level of 
the current movie, but because 
the clips don't contain any 
graphics it doesn't disrupt our 
animation. The text is loaded into 
variables that exist at the same 
level as the movie, with ‘level 0’, 
replacing any content that’s 
already there. 


Reloader 


Although our sound clips are very 
simple movies, the flow of our 
application could be optimised 
for use on the Web by placing an 
If Frame is Loaded action in 
Frame 1, pointing to a sound clip 
in Frame 2. Playback of the clip 
could be delayed until it has fully 
downloaded, while a loading 
message displays. 


ag Continuing in the same movie we've been 
working on, select the layer labelled ‘clips’ then 
drag and drop an instance of the movie clip named 
‘controlclip' from the library. Double-click on the clip 
that's on the stage to open its Properties dialog. 


4 | Go to the Actions layer, and double-click on the 
keyframe in Frame one. Add a Stop action, 
then below that add a Load/Unload Movie action. 
Select Unload Movie from Location and make sure 
that Location is set to Level 1. 


7 Add a final Load Movie action, this time 
choosing the Load Variables into Location 
option. Type ‘text1.txt’ as the URL, and select Level 0 

as the location. This command loads text from the 
files we prepared earlier into the variable Text Fields. 


2 In the Definition tab, find Instance Options. Exit the Properties dialog and reselect the 
Type in the name ‘controller’. You may recall controller movie clip. Go to Edit>Edit Symbols. 
that this is the instance name we asked Tell Target to We've already added layers labelled ‘Actions’ and 
point to in our previous button scripts. Now we have ‘Labels’. Double-click the keyframe in the Labels 
to give it something to trigger. layer and give it the label ‘Park’. 


Click OK, then select the second frame in the 

Actions layer. Now choose Insert>Keyframe 
from the main menu. Double-click the new 
keyframe to get to the Actions dialog and add the 
same Stop and Unload Actions. 


Next, add a new Load Movie action. Choose 

Load Movie into Location, then type the name 
‘clip1.swf" into the URL box. Make sure that Level 1 
is the Location selected. 


a Paste the script in the box, changing clip1.swf 
to clip2.swf and text1.txt to text2.txt. OK the 
changes, then open the Actions dialog for the final 
keyframe — again pasting in the script and altering it 
so it points to clip3.swf and text3.txt. Save the 
movie in the same folder as the extra files, then use 
Control>Test Movie to try it. FEES 


Drag to select the script and press Control+C in 

Windows or Option+C on the Mac to copy the 
script. Click OK. Add two more keyframes to the clip 
timeline, then double-click on the first of these to 
open the Actions dialog. 


Flash & Shockwave special | 49 | 


arts 


| 50 | Flash & Shockwave special 
arts 


The Best of 
LiveMotion 


Adobe LiveMotion is finally making the world 
sit up and look. LiveMotion animation guru and 
Adobe demo artist Steve Holmes shows us how 
to create incredible interactive Websites... 


iveMotion, launched way integration with Photoshop, Illustrator, 


L back in early June, was even After Effects and LightWave 3D, and 
: f P received with scepticism by the most innovative compression 
} most Web designers, and techniques, make LiveMotion very 
even more so by those using Flash for their attractive. This tutorial is designed to 
animations. After seeing exactly what this highlight some of the main features by 
software can do though, the tide is turning. which LiveMotion is excelling, those which 
Excellent animation features, perfect make it worthy of consideration. 


Illustration: Matthew Harvey 


Part 1: Setting up our site 


Blindly faithful to Flash? Let's broaden those horizons, then... 


Create a new file — let's use a cool 16:9 

widescreen resolution of 600x338 pixels. If we 
set the FPS to a decent value, say 25, we can 
change this later to suit our animations if necessary. 
When created, get the Timeline from the Timeline 
Menu, de-zoom it and extend animation time to 
around 2 seconds, 


oe te = Saal 


4 | If we switch back to LiveMotion, we can Place 
the shapes from the File Menu, and then 
choose Convert Layers Into Objects, from the 
Objects Menu. Now we can style these shapes 
individually using our Texture Palette. To rename 
our objects, hit [Return] on their layer names, and 
key the new title in. 


Let's create some basic colour elements to use 
in the background. Select the Rectangle Tool 
and draw a thin horizontal and a thin vertical line. If 
we then change their colours using the Colour 
Palette, we can use the Selection Tool to move them 
into position. We can duplicate these later to make 
interesting background animations. 


eine & 
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If we select our left curved object, we can 

choose a texture from the Texture Menu and 
double-click it to apply it to the shape. If we do this 
for both, we can then click the Background Colour 
button in the Toolbar, and use our Gradient Palette 
to affect the backdrop, changing the blend colours 
as we go (just like ///ustrator). 


Part 2: Easy animation techniques 


A little fancy footwork with twirls and time... 


We are now going to animate our background 
lines. Select the vertical line layer, and in the 
Timeline, twirl down the layer, and then twirl down 
the Transform options. We have a few to use, and 
we are going to animate the position and opacity of 
the layer. First, using the Opacity Palette, change 
the opacity of the line to 0%. 


seconds, we now click the stopwatch next to 
Position and Opacity, making the first keyframes of 
our animation. This locks the objects in their current 
state to the current time. 
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Now let's zip into Adobe ///ustrator and create 


a box of 600x338, and a large oval centred on 
that. Using the Pathfinder Palette, use Back Minus 
Front to punch the oval from the rectangle. Then we 
can Ungroup (Shift-Apple/Ctrl-G) the shape, and in 
our Layers Palette Menu, choose Release To Layers. 
Save the file as native 8 format. 


G Now we need some graphics to use as buttons, 
so let's create a few basic circles and arrange 
them accordingly. Highlight the buttons and select 
our Styles Palette, scroll down to Drop Shadow 2 
and double-click it to apply it to our shapes. This has 
applied layer effects to the shapes, which we will do 
in a short while. 


Move the Time Marker to 1 second, then grab 

the line with the Selection Tool and move it 
across the screen. This creates another keyframe on 
the Position value, with a motion path shown on 
screen as a dotted line. Also set the opacity up to 
100%. This tweening beats Flash. 
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We now want to make the line move back to 

its original position at 2 seconds, so we can 
loop it, so move the Time Marker to 2 seconds, 
select the keyframes for both Position and Opacity, 
and, holding down the Option/Alt key, drag them 
to 2 seconds — this copies them straight there. 


We need to make the line slow down at the 
end and start slowly again, so select the first 
Position and Opacity keyframes (Shift-click), 
Control-click on one of them, and from the new 
menu, choose Ease Out. Do the same for the end 
two keyframes, choosing Ease In, and we have 
smoother motion through the end keyframes. 


RENE Rk? 


G We can also randomise the opacity of the line 
by simply choosing either of the Opacity 
keyframes with our Option/Alt key, and copying 
them to various locations between the existing 
keyframes. Random keyframing like this adds reality 
to an animation. 


Part 3: Rollovers with audio 


Now we'll create our own button rollover 
styles and add some sound... 
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rE] Select one of our button graphics, and double- 
click Plain Style from our Styles Palette. Now 
create a new layer in the Object Layers Palette, and 
using the Layer Palette, offset the new black circle 
and soften it. Fade the layer’s opacity to 60%, and 
we have a shadow. 


4 | Now to add interactivity. Select the Rollover 
Palette, and create a new State by clicking the 
single page icon. This automatically creates an Over 
State Rollover, ready to style. All we need to do at 
this point is change the basic colour of the object's 
top layer to a slightly darker blue. 


Select the top layer in the Object Layers 
Palette, and fill it with a basic blue colour. Set 

the layer's opacity to around 60%, and then apply 

an Emboss effect using the 3D Palette. Play around 


with the settings until you are happy with the effect. 


Duplicate this Rollover State (to keep the same 

colour), and the new one becomes Mouse 
Down. Select the top layer again, and in the 3D 
Palette, rotate the light source round to -45°. This 
makes the button look depressed when clicked. To 
preview all these effects, just hit (Q) and then click 
your button to see it work. 


Let's add another cool effect in here. Create 

another Object Layer, and in the Layer Palette, 
set it to fill with Background, then go to the Distort 
Palette and apply Twirl to around 15 turns. This 
effect is cool — pick the layer up and move it around 
the screen now, and see how it twirls all the 
elements it passes over! 


To add sound to that state, make sure the state 

is highlighted in the Rollover Palette. Go to the 
Sound Palette and drag the required sound (double- 
click to play them) onto the button in the main 
window to add it. When done, drag the whole 
object into the Styles Palette, name it, and apply the 
style to the other buttons. 


Part 4: Independent animation groups 


Next we'll make our button activate a different animation on 


screen — a bitmap one with alpha channels! 


Go to the File Menu and Place 
Sequence — 
the Blob.tga sequence from the demo CD. 
To loop this element, select Time Independent from 
the Timeline Menu, and click Loop at the bottom 


In this new state, set the Object Opacity back 
up to 100%. If we now click between the 
Normal and Reveal states of the Object's Group 
name, we can see the object show/hide. 


the Timeline Menu, then double-click the new 
group in the Timeline, opening its own Timeline. We 
can animate many states of this object in here. Select 
the looping blob layer and fade its Object Opacity to 
0%, making it invisible. Note we are in the Normal 
State of the Rollovers Palette. 


Now click the pop-up menu below the Time 
Controls in the Timeline, and return to the 
original composition. If we now preview (Q), 
everything is still there, but the blob is now hidden. 
Select our top left button, and choose its Mouse 
Down State from the Rollovers Palette. Click the 
Behaviour button to add a new Behaviour. 


Select the Group name again, and create a 

new Rollover State in the Rollovers Palette, but 
select the state menu and choose Custom State, 
naming the new one ‘Reveal’. Creating a custom 
state name allows us to activate that state later with 
an action on our button. 


From the Behaviour dialogue box's pop-up 

menu, choose Change State. From the list on 
the right, choose our Blob Group, and then select 
the Reveal state from the bottom menu — perfect! 
All interactivity can be easily controlled by this 
simple technique. 


Part 5: Looped ‘loading’ splash screens 


Don't leave them in the dark — and entertain them while they wait... 


a Change the duration of our movie to 2.15, and 
move all layers along to 15 frames across; this 
allows room for splash screen graphics. Drop a black 
box in at the size of the file, and make it play for 15 
frames, Also, create a word using the Text Tool (T) 
and position it accordingly. Place in the Clouds.psd 
from the disk, and layer it behind the text. 


—<———0 pets! cold 
Now to make the text flash. Twirl down to the 
text's Opacity options, and apply a keyframe 
of 100% at 0 seconds. Apply a0% one at 15 
frames, and then, using the Control key and clicking 
on the keyframes, set the first one to Ease Out, and 


the last one to Ease In. 


Now to make markers on the Timeline to 

control playback. Keep the Time Marker at O 
seconds, and click the Behaviours icon in the 
Timeline. Name this marker ‘Loop 1’. Click OK, 
move the Time Marker to 14 frames, and create 
another Behaviour here, naming it ‘Loop 2’. Finally, 
create another at 15 frames called ‘Gol’. 
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4 | Now to make the software loop on this starter ———_—— ——— - |= 

screen until the rest of the file has 5 | Now, select Go! as the frame which we will go 
downloaded. All we have to do is double-click the to automatically when the file, from Go! 
Behaviour icon called ‘Loop 2' at 14 frames, and onwards, has loaded. This will cause the animation We can customise our animations further by 
select Wait For Download from the Behaviours to loop between Loop 1 and Loop 2 until Go! is in fading the transparency on the clouds to match 
menu. We can then choose Loop 1 at the frame we memory, and then takes the Playback to that point the text fade. This makes it look like the text and 
are going to loop to, and onwards. clouds are being lit by a generic light source. 


Part 6: Export & publishing 


And if you're not already really impressed, this is where 
LiveMotion can show Flash a thing or two... 


While the file is in the browser, click the 


Firstly, let's preview our file in a browser to Export Report link, and view the file size and Back in LiveMotion, go to the View Menu and 

check the playback and interactivity. Go to the | download times for different modems. This file is choose the Export Palette. In this palette, turn 
File Menu, choose Preview In and select your fairly good — 76.7k, without even having to change on Preview, and the main window displays the file 
preferred browser. The file is exported as a the compression settings. And we are still playing size at this time, this frame. If we scroll to different 
temporary SWF file and previewed. back at 25fps. parts of our file, we will see different values. 


If we choose a compression value for the 


Now we can do the same with our buttons 


G whole file, with FPS at 25, we are as limited as 5 | too. Select them all and again apply Object G Finally, do another preview into the browser, 
Flash is. So, here's the cool part — select our left settings for them, separate from the rest of the file. and check final quality and size (clever, isn't 
curved box, and choose Object from the bottom This is starting to improve an already great file size. it?). For final output, choose Export from the File 
menu of the Object Palette, and click the page icon Try the same with the chrome blob too, and we can —- Menu, and the file is saved to the hard drive as a 
to create new settings for just that item. Play save even more space by reducing the frame rate of native SWF animation, ready to be loaded into 
around, but no other objects will be affected! the blob, different to the 25fps we have already. Dreamweaver or GoLive. Have fun! EEE 
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Section... 


On the cover CD you will find a series of behaviours and scripts for Director and movies for 
Flash, many of which will lead you to exclaim “golly, my Life is enriched!”. Possibly... 


Director /SW 


The following files can be found on the cover CD — go 
to the Dual folder, then into the 25 Beh folder. The 
scripts are all contained within a movie. To open it start 
Director 8 and go File>Open and select the file from 
the CD. [beh.dir]. If you open the cast you'll see the first 
member is a score script, this being required for most 
of the scripts. 


Gotonetpage 

This is a drag-and-drop behaviour — simply drag it 
onto a sprite and enter your destination URL. It will then 
launch straight into the Website when clicked. 


Shrink 

This adjusts the scale of a sprite depending on the 
distance between the mouse and the sprite. The values 
can also be quickly adjusted. 


Open 

A Mac-only behaviour; drag this onto a sprite and a 
dialogue box will appear. Enter the application path and 
it'll open most external applications. 


Time field 


Asimple script to show the time within your interface. 
All you need to do is create a field called ‘timefield’: 


Startmovie 
Sets the visible of a sprite which you can control with 
other scripts and behaviours in your projects. 


Cursor 

Simple finger cursor behaviour. Drag and drop onto a 
sprite to get the cursor to change. If you're jumping 
from frame to frame, or movie to movie, and get left 
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with the finger instead of the arrow, just put the second 
part of the script in the first frame of your score. 


Rollover 
Sets the visible of sprite during rollover; one of the 
most useful button scripts. 


Scroller 

Will scroll sprites by moving the mouse; great for 
scrolling menus. Change ‘put (xpos+speed) into xpos’ 
for ‘put (xpos-speed) into xpos’, to get it scrolling in the 
opposite direction. 


Rolltext 

Puts text into a field as you drag over allocated sprites 
— great if space is short or if you have a large amount 
of text that you want displayed. 


MIAW 

Opens a movie in a window. The script includes the 
window type and the functions to close the window if 
the movie is stopped. 


e-mail 
Drag and drop email. Simple dialogue box will appear 
to enter an email. 


Mover 
Simply locks the horizontal position of the sprite to 
the mouse. 


Constrain 
Follows the mouse around but is constrained in a box. 


Getaway 

Sprite has a lock distance away from the mouse, so 
looks like it is either following or evading. The distance 
is fixed with no damping. 


Dropdown 
Adds a drop-down menu to your interface at the 
file menu. 


Play 
Controls video drag onto a button for a movie, and 
it will act as a play button. 


Pause 
Video control — will pause video 


Forward 


Fast forwards movies. 


Rewind 
Rewinds movies. 


Copy 
When clicked will copy a cast member to the end 
user’s clipboard. 


Jumper 
Random marker or movie jumper. 


Colour changer 
Will change stage colour depending on the location of 
the mouse. 


Location 
Puts the co-ordinates of the mouse location ina field. 


Score script 
Holds callers to handlers needed for many of these 
scripts and behaviours. 


Browser name 
Appears in startmovie scripts and is required by 
‘gotonetpages’ and ‘e-mail’ to launch your browser. 


Flash 


From simple actions to complex 3D behaviours, each of 
the 39 Flash movies we've collected has something to 
say about how you work. You'll find them in the 
dual\fla’s files folder on your cover CD. 


Actions demo 

This fla shows buttons in action. Clicking the three 
separate buttons results in the three different sliders 
moving across the screen and back again. 


Interactive Environment 

This Flash movie shows seemingly random-moving 
circles that you can click on to control the cuboid 
encompassing them. 


Orbiting text effect 

This movie shows Flash’s ability to animate text circling 
a sphere in three dimensions. Clicking on the sphere 
will result in the text being animated going around the 
sphere rather than forming a ring. 


Text drop 
Text Drop shows text falling like rain and fading into 
view. The required Yonder Truetype font is included. 


3D cow 
This is a simple use of a 3D object converted into Flash 
vectors to show a cow rotating. 


3D Double Cone 

This source file shows how you can create a 3D menu 
system that takes up little room initially on the screen, 
but can be made to dominate. 


3D girl 

This girl was created with Poser 4 and all frames were 
exported in 3D studio (.3ds) format. Then these frames 
were imported into Vecta 3Dto convert the 3D mesh 
into 2D vector images and exported as an SWF file for 
further editing in Flash. 


3D light 
This movie allows you to grab the light hovering above 
the ball and drag it around the playfield showing how 
shadows and light influence are generated dynamically. 


3D Morph 


This is a simple morph between objects to create a logo. 


3D particle 

This Flash movie, only available as source on our CD, 
shows a spinning vertical column of bubbles, much like 
those generated when pouring fizzy liquid down the 
drain. However, unlike the fizzy drink example, you can 
click on these bubbles to make them disappear. 


Active text 
Available both as source and also as a finished SWF file, 
this movie shows the text effects Flash is capable of. 


Blue funk menu 

This simple Flash movie show two things. One is that a 
mixture of bitmapped and vector objects can really 
work, the second is that doing this can result in much 
larger files than with Flash alone. 


Bouncy Ball 
This simple Flash movie shows the use of algorithms to 
generate a gravity-like effect. 


Circle Menu 

This Flash movie shows menu selection in a novel way. 
Rather than presenting all the choices to the user at the 
same time, he or she has to click on them as they are 
shown through the portal of a Pac-Man-shaped object. 


Constrain to Arc 

This Flash movie shows the use of some clever algebra 
that constrains a slider to an arc in Flash, rather than 
using the usual buttonover scripting which makes a 
bigger, but simpler, Flash movie. 


Drag Movie Clip 

This movie shows you how it’s possible to create a 
movable tab that allows you to choose one of several 
different movie clips by clicking on its buttons. 


Draggable navi-ball 

This funky movie shows how it’s possible to make a nav 
bar that’s out of the ordinary, movable and good to look 
at. Try dragging it around by the small circle at the top 
of the pyramid. 


Drop down menu 

This shows you how it is possible to have a set of tabs 
that will replace each other to give you more room for 
links. This Flash movie is only available as source code. 


Drop-down menu 

Different to the last one, this Flash movie allows you to 
create a draggable bar that can be moved, but when the 
mouse hovers above, it expands to reveal a set of links. 


Fade button 

This Flash movie shows you a button that fades in from 
the black background. Try using it from the included 
HTML file to see where it is. 


Fading text 
This simple Flash movie shows you how to alpha 
channels to get text to fade in and out. 


Flame thrower 
This Flash animation makes text look like it is burning. 
Available as source and Flash Playerfile. 


Flash Magic 
This Flash movie shows a cascade of rectangles 
appearing onscreen and changing colour. 


Flash Windows 

This Flash movie shows an OS-like desktop interface 
complete with movable, collapsable windows and 
clickable buttons. Source and player file included. 


Interactive 2D logo 
This simple Flash animation shows you how you can 
add interactivity to even the simplest of logos. 


Live Counter 

This script provides you with a Flash-based web 
counter which has to be used in conjunction with its 
matching cgi-bin Perl script to work. 
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Menu hierarchy 

This complex Flash animation allows you to create an 
expanding hierarchical menu structure that initially 
takes very little web real estate. However, by the time it 
is fully expanded it can take a lot of room! 


mr 

This tersely-named movie creates a sliding menu 
system that can be used to introduce and conceal small 
pieces of text according to the user’s wishes. 


Orbiting button 

This Flash file shows the creation of a simple button 
object with an element seemingly rotating around it. 
Source and Player file included. 


Pop-up window 
This Flash file is initially simple, but can be used as the 
basis for a system of draggable menu windows. 


Shape tween 

This movie shows the use of the tweening functions so 
that you can seemingly move a cube in three 
dimensions with it resizing and changing in 
perspective. 


Simple Menu system 

This file is available as source and a Player file and 
creates a simple menu system using sound and visual 
highlighting to indicate which button you are hovering 
over. It does what it says on the tin. 


Star button 
Another seemingly 3D object rotates on a mouseover 
event, and spins rapidly when clicked. 


Tab menu system 

This simple but good-looking tab menu idea allows the 
user to restrict the number of choices by means of an 
interactive slider. 


Text and tunnel FX 

This shows the use of dynamically animated text in 
response to user input or alternatively, can show the 
traditional ‘tunnel of rectangles’ beloved of 
screensaver writers. 


Textfield auto-scroll buttons 

This Flash movie will help you create scrolling 
textfields of your own, including scroll direction 
buttons. 


TopGun 

Aim your reticle at the target and press fire. The 
obvious target is in the middle of the screen, but have 
you spotted the other, hidden one? 


Tumble dice 

The authors assure us that their movie is great for 
games and certainly with a bit of tweaking their 3D 
engine for Flash could easily be useful for a wide range 
of things. 


Windows 

This Flash movie emulates the look of the Microsoft 
Windows desktop. You can open new windows, click on 
the Start menu and more. GXS 
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You'll find the files and code needed for 
this tutorial on our Website at 
{w] wwwcomputerarts.co.uk/cdrom 


“ESS To follow this tutorial you can use the 

© ) Director 8demo from our CD. 

S=/ — Director 8costs £939 from CU [t] 020 
8606 4001 or [w] www.macromedia.com 
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Lingo for the Web 


Following on from our Shockwave Basics 
tutorial, we'll now explore the use of Director's 
Lingo scripting language... 


a reating Websites in HTML, or | The power behind Director and 
Py even Flash, is all the rage. | Shockwave is the scripting language, 

I However, if you want to make Lingo. In the following tutorial we'll show 
fi a slick and interactive | you howto construct a navigable creative 
presentation, using the Director | Website, with scrolling menus and 
Shockwave Studio often makes more | interactive fish, entirely in Director. In the 
sense. On the downside, it can be a more | process, you'll get to learn Lingo usages. 
technical task and top-end results are | The example created is the Website for 
often painful hard work to attain. RPS photographer Eddie Whiting. 


st np: Magic 10} {wl 
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Real-Time Recording 
Step Recording 
'v Loop Pt 
Selected Frames Only 
Volume 
Disable Scripts 
Toggle Breakpoint “CORK 
Watch Expression <CoO¥W If 4 yet Shape 
Remove All Breakpoints pat. 
ignore Breakpoints CO%! haere 
f ickTime 
Step Script xeoxui Bi 
Step Into Script COR Color Palettes “(#7 
fun Script XORt 


eee you dorichave to e-bater aU onary 
nav need to write « thatwe Open the Behaviours gt sas name it and click 
can drag and drop to take us to each different page. the Script button. 


The second vital component is to get the movie 
to get the browser type. This is done with the 
following short piece of code that you place in the 
On startMovie script so it has effect from the start. 
on startmovie 


nd-drop that you There are two other components you'll need 


dpply to a member of the cast. The for this behaviour - the first is a field that will 

GetPropertyDescriptionList builds a dialog box display the browser name. This doesn't need to put browserName() into field “Browser” 
which appears, letting you quickly adjust location appear on the stage but sits in the cast and just acts 

without the need to write extra code. as reference; we've called this field ‘browsername’. end 


Part 2: Scrolling text without scroll bars 


Standard scroll bars are ugly, but with the aid of a simple script 
yours will be a work of art. Well, very nearly... 


- a Create yourself a field and place this onto the 3 | Adjust the field to the size you want and then 
You can write a Lingo script to create your own 


stage. Add the text you want, then click on the create two boxes that cover the top and the 


scroll bars that have to look better than the Property Inspector. Check that the framing is fixed. bottom of the text, leaving a gap in the middle. 
ones that appear as standard. Alternatively you can Also check you've named the field and placed it in Make sure these boxes are in Channels 20 and 21 - 
do away with them completely. Channel 3 of the score. but you can change this later through the script. 
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8 | Create a cast script and enter the following. 
4 | In the score script you should have the On roller 

usual code: else if rollOver(20) then 
On exitframe scrollByLine member “edtext", -1 


Go to the frame else if rollOver(21) then 
End scrollByLine member “edtext", 1 G All that this script basically says is that if your 
Add a handler such as roller - this will refer the end if mouse is over sprite X then the text will scroll in 


movie to a script in the cast. end the field by +1 line or -1 line. 


Part 3: Scrolling images 


A dynamic alternative to the dull old click-image-to-enlarge style... 


You see many galleries on the Web with static 

interfaces, but it is possible to get these A pen and paper may also be required! 
scrolling too. Here we'll make a selection of images Create all your images for the gallery as small Select all the images you want in the cast and 
scroll along the screen depending on the position icons. It's also a good idea to make these all drag and drop them to the horizontal position you 
of the mouse. the same width; it'll cut out a lot of hassle later. want them to appear in. 


gallery Stage (100%) 


[ELC eh 


put 768 into xpos 


4 | Move the images along on the stage, each 

time leaving one behind with a space between 

each. Unless you have a very large monitor you'll 

probably lose the position of half of the spites. 

A maximum of ten is advisable, although you can 5 | Add a line to your score script pointing at a 
handler, in this case ‘Scroller’ box on the left of this page. 


6 | Create a new cast script called image scroller. 
Add the script you'll find in the ‘Scroller Code’ 


go to quite a few more. 
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Part 4: A closer look at that code 


It gives the illusion of a continual loop of images, so it's worth the effort... 


This script refers only to sprite 20 and its 
horizontal movement and control due to the 
position of the mouse. 


4 | if xpos < -200 then 
set the locH of sprite 20 to 780 
put -200 into xpos 
end if 
We want the gallery pictures to go in rotation — this 
bit of script simply says if the registration point of 


the sprite is at -200 then change it's location to 780. 


sprite 20 
set h = the mouseH 
put 480 into stageWidth 


set speed = (h-(stageWidth/2))/60 


sprite 20, is a reference to the sprite for yourself. 
Set h = the mouse H, sets the horizontal movement 
of the sprite to the horizontal movement of 

the mouse. 

Put 480 into the stagewidth, this refers to the width 
of the stage in your movie. 

Set speed = (h_(stagewidth/2))/60, creates the 
movement of the sprite, its speed and direction due 
to the mouse. 


estou 
neta agaslyth/2)) te 


Analt of sprite 20 into »poe 
But Cpontapesd inne noc 
ikea ate i to ~p08 


if xpos > 780 then 
set the locH of sprite 20 to -200 
put 780 into xpos 
end if 
Again very similar, this time for the other direction. 
You can check the registration point of a sprite 
member by opening it in Director's paint program 
and using the Registration tool. 


the aouse¥ 
put 489 into stageHid 
t speed = ce (oeagellidth/2))/60 


at tha, leo of apr te 20 to 780 
put ~282 Into 
end if 


If xpos > 788 then 
set the lock of sprite 20 to ~208 
put 788 into xpos 


mousev 
put 488 into stageHidth 


put the locH of sprite 20 into xpos 
put (xpos+speed) into xpos 
set the locH of sprite 20 to xpos 
This works the speed with the horizontal location of 
the sprite, so by changing (xpos+speed) to (xpos- 
speed) you can get the sprites to move in the 
opposite direction. 


G To get this script working properly you will 
have to adjust the numbers depending on how 
many sprites you want scrolling. It's best to get a 
pen and paper and try to work it out. 


Part 5: Creating interactive fish 


Just a bit of fun really, but also a way to get the sprites to react to mouse position... 


[) els) ESTs) GEIS) 


a This is really just a much-simplified version of 


the scrolling script with the inclusion of vertical 


movement. Firstly create four sprites and place 
them on the stage. 


Create a box around the sprites to contain 
them — in the movie we don't want them 
changing location, just floating around. 


i lan i 
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me 
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ay We need to constrain the sprites’ movement to 
the size of the box, so here we use some script 
in the score to set this... 


set the constraint of sprite 4 to 8 


Flash & Shockwave special 61 | 


Part 6: Sprite positioning 


Setting the horizontal and vertical movements... 


== Behavior Script 3 
Set the speed 
& direction 
Reishee ase suestal (xtra) (=T] EAEARC 
put (xpos-speed) into xpos  iadliabd “s 
set the LocH of sprite 4 to 
xpos 
set speed =(v- 
(stageheight/2))/15 teoatiatn 
put 220 inte stapene! 
putthe lev ofsprite 4 inte t speed = thetaeageltidtn/2))/20 
ypos me i aes lock ba ih 4 into xpos 
put (ypos+speed) into ypos Gat the lect of sprite 4 to xpos 
set the locy of sprite 4 to ypos set speed = (h-(stageHidth/2))/30 
put the loch of sprite 5 ae xpos 
but (xpos+speed) into xpo 
the toch of sprite 3 to xpos 
set speed = (h-(stageHidth/2))/15 
put the lecH of sprite 6 Into xpos 


Next we have to set the the horizontal and 
vertical movement for the sprites. Here we use 
the same script as in the gallery but add the 
vertical parameters... 


set h = the mouseH 

set v = the mouseV 

put 480 into stageWidth 

put 320 into stageheight 

set speed = (h-(stageWidth/2))/20 


Eddie Whiting 


The gallery images used in the course 
of this tutorial are pretty stunning. The 
work of photographer Eddie Whiting, 
they’re representative of his preferred 
and largely aquatic theme... 


sa diver | want to see the underwater 
world at its best, and as a photographer 
| want others to see this world,” 

‘e explains Whiting. 

“| started diving after years of taking pictures 
and therefore to take a camera underwater 
seemed the natural step. What | saw while diving 
had always captivated me and | work to convey 
the moods and life within this world.” 

In the last couple of months he’s gained a 
licentiateship from the Royal Photographic 
Society and has been asked to provide some of 
his images for their Website ([w] www.rps.org). A 
selection is also available as a limited edition 
‘Photographs from the Blue’ series as both prints 
and posters. 

Whiting is beginning to experiment with image 
manipulation, but admits he needs to devote 
more time to the pursuit: “It’s very much a spare 
time thing at the moment, but | really admire the 
Exposure pages in Computer Arts — I'd love to 
see my work in there some day.” 
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= Behavior Script 3 =—=————— A 


get the constraint of sprite 4 to @ 
set the constraint of sprite 5 to & 
set the constraint of sprite 6 to & 
set the constraint of sprite 7 to 8 


| set h = the mouse 


vet v = the mouseV 

put 488 into aot es 

put 320 into stageheigh 

set speed = (h-(stagelli hath/2)) )/28 


|| PU the: Loci of epnite) 4 into xpos 
| put Gees-spead) into xpos 
| Set the lech Of sprite # to xpos 


| set speed = (h-(stageWidth/2))/38 


put the loch of sprite 5 into xpos 
put (xpestspeed) Into xpos 
set the loch of sprite 5 to xpos 


| set speed = (h-(stagellidth/2))/15 


| put the locH of sprite 6 into xpos 


Firstly set up the horizontal position and speed 
direction for the sprite, followed by a few 
slight changes for the vertical movement 


and speed... 


(see ‘Set The Speed & Direction’ panel on left) 


G All this script should be put together and either 
placed in the score or preferably have a handler 
that points to cast. All you have to do is apply this 
script to each sprite you want — when you run the 
movie you should see the sprites contained in their 
enclosure swimming around quite happily. EEE 


Computer Arts DV Special — 
COSsB0008 

Enter the world of digital video, 
with a little help from our 1014 
professional tips. Discover how to 
create a pop promo for MTV for 
under £500. Follow our expert 
tutorials showing you how to edit 
your footage with style, and all 
the latest software and hardware 
is reviewed, with a special look at 
Apple’s Final Cut Pro 1.2. 

CD MediaMania Video (PC only), 
a complete suite for creating your 
own video effects. Plus quality 
royalty-free footage and effects, 
and a digital video demo collection. 


computes 


ares! 


Issue 45 — Code CA045 
FreeHand 9 tutorial, photorealistic 
3D Skills, Discreet Combustion*. 
CD FreeHand 9 & trueSpace demo. 


Computer Arts 3D Special — 
COSB0009 

Think 3D is too difficult for you? 
Think again. The latest 3D 
Special will explain the tips and 
techniques from beginner to 
advanced. There are tutorials for 
LightWave, Maya, 3D Studio MAX, 
83 tips for the top packages, and 
inspiring profiles from pros and 
amateurs alike. Plus, how to get a 
job in 3D, resources, and more. 
CD PiXELS3D/2.1.4 full version 
(Mac only), a complete tool for 
modelling, rendering and 
animating. Plus demos of Cinema 
4D XL 6, Bryce 4 and lots more. 


Photasbop Skits 


XPress 5 


Issue 46 — Code CA046 
Web-fuelled multimedia with 
Director 8 plus Graduate Showcase. 
CD 30-day demo of Director 8. 


All back issues c 


Computer Arts Web Special — 
COSB0010 

Our latest Web design special 
gazes into the stars and predicts 
the future of WAP, the technology 
that's bringing mobile phones and 
Web design together. Some of 
Britain's most successful Web 
design houses are profiled, and in 
addition to 71 Flash Tips, we've 
got tutorials on LiveMotion, 
Dreamweaver 3 and JavaScript. 
CD Trellix Web 2.5 and Web Media 
Publisher — Web design packages 
for PC, plus Freeway, a Web design 
package for Mac. Plus 100 Flash 
symbols from the Sparkle collection. 


con — 
Du her 


Issue 47 — Code CA047 

Escape CMYK plus Photoshop 6 
revealed and cloning skills. 

CD 30-day dual trial of LiveMotion. 


[13/1100] 


£1 per issue for 


Computer Arts Photoshop 
Special —- COSB0011 

Recreating the cover image with 
our massive tutorial is only the 
start of this invaluable Photoshop 
resource. Discover new tricks 
with 101 tips, use Photoshop 
with the Web, check out the latest 
cutting-edge illustrations, and get 
the definitive low-down on plug- 
ins. Plus resources, guides 
shortcuts and Websites. 

CD A complete version of 
Intellihance 3.0, the excellent 
image-enhancement plug-in. Plus 
My Portfolio, a handy image 
cataloguing tool, and 10 demos. 


Issue 48 — Code CA048 

Master MoviePack, plus 
combustion and UltraDev reviews. 
CD 30-day trial of MoviePack. 


of the world. 


Computer Arts Dreamweaver & 
UltraDev Special — COSB0012 
UltraDev isn’t just a ‘pro’ version 
of Dreamweaver: find out where 
to use DW and how UltraDev can 
help when it comes to adding 
features such as e-commerce. 
Also discover how to create a top- 
end Website, why behaviours are 
an important feature of DW and 
how to optimise Web graphics 
with Fireworks. Plus resources, 
books and an extensions guide. 
CD 30-day trial versions of 
Dreamweaver 3, Fireworks 3 and 
UltraDev plus a heap of free 
extensions and resources. 


Issue 49 — Code CA049 
Character animation in 3D Studio 
Max, plus Flash 5 review. 

CD //iustrator 9 demo. 


+44 (0)1458 271108 


www.computerarts.co.uk/backspecials 
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land 6. Stills from the excellent Requiem For A 
Dream site at [w]www.requiemforadream.com “For us 
Web work isn’t just the design, we always start off by 
writing a very detailed concept and aim to design and 
structure a Website according to the nature of the 
project,” says Florian Schmitt. “For Requiem For A 
Dream the conceptual part took up almost as much 
time as the actual production of the site.” 


2. “We usually look for inspiration more in the 
analogue than in the digital world,” says Florian 
Schmitt. “We find inspiration in the video work of Bill 
Viola, the architecture of Zaha Hadid and the literature 
of Greg Eagan, to name but a few. Finding new ways to 
display and structure text and data is something we 
are really interested in. And of course we are always 
influenced by everything else we see online.” 


3. The fake intro for the Requiem For A Dream 
Website. “A lot of our work is meant to be rather 
disturbing or unsettling, because people take 
superficial beauty for granted and we like to remind 
them of the beauty of malfunction, of discovering the 
skeleton underneath the surface, You can make a site 
appear almost alive this way, make it communicate 
with the viewer, transform it into a ‘living’ organism.” 


“We transformed the isometric constructivist artwork 
into the interface.” Design studio hi, Res! enjoy a Flash challenge... 


urrently in its tenth year, Ninja Tune has 
never been a typical music label. Founded 
by Coldcut’s Matt Black and Jonathan More, 
it’s long been a home for innovative beats 
and beeps, further spreading its tentacles into club 
nights, spin-off labels, and multimedia. 

Matt Black created the very first Ninja Website back 
in 1995, but with the Internet empire now 
encompassing a brace of artist-specific microsites, 
and regular webcasts from [w]www.piratetv.net, actual 
Webpage design is now handled by hi, Res! 

hi, Res was founded in Germany in 1995 by then art 
students Aim Jugovic and Florian Schmitt, who went on 
to design cover artworks and direct music video 
promos. They were joined by musician Clifford Gilberto, 
who was signed to Ninja — and so the relationship 
began, being further strengthened by a move to 
London in 1999. 

“We only started using Flash in September 1999, 
and hadn't done any Web work before that,” reveals 
Schmitt. “We always saw the Web as quite static, but 
Flash seemed the application that could enable us to 
transfer our ideas of 3D environments and animation.” 

Not surprisingly, Florian cites Flash’s stability across 
platforms and small file sizes as its key strengths. 

“We haven't used Shockwave yet, because the file sizes 
tend to be quite large, and we've always seen the 
Shockwave plug-in download as a bit of a pain,” he 
adds. “However, we have several projects that will use 
Shockwave, mostly for interfaces that couldn't easily 
be done with Flash.” 
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Site artwork tends to reflect that used on CD covers 
and other media, though this merely provides a starting 
point. “We have meetings with Ninja and write 
concepts, but we can pretty much do whatever we feel 
is best. One example is the first site we did for them, 
for DJ Vadim at [w]www.ninjatune.net/ninja/artists 
/djvadim/ microsite, where we transformed the 
isometric constructivist artwork into the interface and 
gave it actual 3D depth.” 

In addition to the work for Ninja Tune, hi, Res! is 
involved in several other projects, including 
[w]www.soulbath.com, the studio's own ‘digital 
playground’. “It gives us the possibility to define our 
own concept and develop various ideas we've had for a 
while into one coherent piece. It will continue to grow, 
not only as our own project but as a digital frame that 
other contributors can fill with content. A first attempt 
at this was clickhere!, an exhibition of (anti)banners, 
where we asked people from all over the world to 
re-interpret the banner as an artform.” 

Latest creation, [w]www.requiemforadream.com, 
also sprang from soulbath.com. This site was created to 
partner the new film by Darren Aronofsky, due out in 
January 2001. “The project was so close to all of us, 
that we could never detach ourselves from it and 
regard it as a job, which resulted in four weeks of 
18-hour days without a single day off — it’s paid off in 
every way, though.” EEE 
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4. hi, Res! created the Amon Tobin Website at 
[w]www.ninjatune.net/ninja/artists/amontobin for 
Ninja Tune. It received the first ever Flash five-star 
award. “In terms of good or bad Web design, there are 
no rules for us,” says Schmitt. “Of course, you usually 
want an interface to be easily understandable and 
text to be readable, but sometimes, you may want just 
the opposite. Generally our only rule is to do whatever 
is best for the project.” 


5. The hi, Res! homepage at [w]www.hi-res.net 
Florian: “I think what makes us a bit different is that 
we don’t come from an HTML or Director background. 
We're artists, musicians, graphic-, 3D- and product- 
designers, and all quite in love with technology. The 
Web enables us to take all these various disciplines 
and apply them to one medium.” 


Flash & Shockwave Special | 65 | 


\\lustration: Magic 


Motion graphics 
The following exercise demonstrates how some of the 


vector animation tools in Flash can help form a useful 
partnership with Adobe's After Effects package... 


lashcan be used for more QuickTime movies and Targa sequence 
than simply generating wow- files, suitably amazed by the hidden 
factor Web graphics. It has a qualities of Flash as a vector animation 
! simple and intuitive interface tool. While this is a fairly simple 
and library system and some deceptively demonstration, we'll run through some 
useful design tools as part of its package. of the functions that Flash has to help you 
Once you get over the initial shock that it reduce the hours you spend using and 
exports more than SWF files, you can dealing with vector art in your After 
bravely venture forth into the world of Effects package. 
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e mage will 
0 its constituent or ‘working’ parts. You 
can ‘do this by choosing New Symbol from the Insert 
drop-down. By clicking Modify>Break Apart, the 
constituent elements will be revealed. 


ed independently will 
‘need b be grouped together. This is done by 
mouse clicking + shift to select multiple shapes, then 
Insert>New symbol. In the pictured example the 
head and hat have been made a symbol and can 
now be seen in the library — name this symbol 
‘bobby head 1’. 


g each constituent syribel i in the 
ibraty delete the residual images left on the 
scene floor. These will no longer be needed, as the 
crucial elements of the composition should now be 
safely stored in the library. Labelling your symbols 
clearly is a good habit to get into, as is similarly 
naming the layer in which they reside — as your 
movies become more complicated, the easier it 
becomes to lose track of where things are! 


Part 2: Animating the elements 


Now that all the elements have been prepared you can begin to arrange them in the main scene... 


QuickTime 

You will need Apple QuickTime 
4.0or higher to use this tutorial. 
A free copy is available from 
[w]wwwapple.com/quicktime 


a This simplifies the process of making changes 
within your composition, as one change will 
take place globally within a scene. 


The animation process itself is straightforward. 
Your shape within the library should default to 

Frame 1, Layer 1; this is your first keyframe. 

In order to animate, you will be required to insert a 

second keyframe later in the timeline. This is done 

by using Insert>Keyframe. 


3 | Once the second keyframe is fixed, by simply 
using the selection tools on the toolbar, 
manipulate the object into its desired second 
position. Once satisfied with the position, double- 
click in the space between the keyframes to bring 
forward the frame properties dialogue box. Then 
Tweening>Motion>OK this action can be repeated 
as many times as required until the sequence is 
completed. However, ensure the first and last 
keyframe are in the same position, to ensure a 
certain loop. Also note the duration of the clip, as it 
will be important later. Aim for about 60 frames. 
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Part 2: Animating the elements continued... 


Size matters 

Adobe After Effects imports files 
at the exact size they were 
created, unlike Adobe Premier 
which imports the file at its 
Current project size. This makes it 
even easier for people to make 
precise layout functions in their 
vector animation before they 
combine it with After Effects. 


4 | Flash will also allow you to embed animated 
symbols inside that of another symbol — this 
allows multiple independent movies to co-exist and 
help form increasingly complicated structures. In 
this example the animated dice have been fixed in 
their own layer onto the rear-view mirror of the car. 


In the new symbol, position the bottom-most 

point of the head on the cross that marks the 
centre of the page. When you return to ‘bobby 
head 1' you will find that it too has moved. This 
indicates that the centre point of this symbol has 
also moved. 


To create the illusion of motion on the vehicle 

itself we created a series of keyframes, without 
the motion tween. This gives a jerky overall 
impression of motion, juxtaposed with the fluid 
motion of the dice. Again take note of the duration 
of this clip. 


G In order to animate the sideways motion of the 
head, a second symbol of the head must first 
be made. This is done in order to adjust the centre 
point of the head, which is by default the middle of 
the symbol. Name this symbol ‘bobby head 2’. 


8 | As with the dice, create a series of keyframes, 
finishing in a loop. A loop can be simply 
achieved by copying the first frame of a sequence 
and pasting it in the last. Using the rotation tool, 
rotate the head, about 20 degrees in one direction, 
and then 20 degrees in the opposite. Create a 
motion tween between each keyframe. 


9 | The windscreen wipers operate in a very similar 
manner to the head, and can simply be created 
inside Flash without the hassle of resorting to an 
external editor. By clicking on the small arrow on the 
top right of the library window and selecting Create 
New Symbol, it is possible to draw your symbol 
directly into the library. 


Part 3: The big picture 


Now that all the elements have been prepared you can begin to arrange them in the main scene... 


Processor power 
Note that you would need a fast 
PC or Mac to run at 30fps and 
not drop any frames during 
playback. But note that this 
should not have any effect on 
the exported QuickTime movie 
from Flash. 


1 | Drag the animated car symbol onto the stage 
area. You should find that the animation is not 
yet enabled as your sequence only occupies one 
frame. From earlier notes you should not be able to 
determine the length of the clip you have placed in 
the timeline. So that your clip has the room to 
‘move’, scan across the timeline until you find the 
determined end point, click that frame and 
Insert>Frame. 
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py Now that both the dice and the car are in the 
timeline, scale them so that the window of the 
car dominates the stage area. If you made the 
wipers, drag them into the new layer beneath the 
layer occupied by the car. 


Import ‘bobby head 2' from the library and 

Position and scale the object in a new layer so 
that it is in proportion relative to the vehicle. If there 
are any idiosyncrasies in timing, these can be quickly 
fixed by returning to the library and adjusting the 
timelines therein. 


Part 4: Fresh surroundings? 


That'll mean it's time to create the second scene, then... 


ASL 


One of the strongest assets of 
Flashis its ActionScript 
Language. With this, users can 
create random and mathematical 
vector drawings and actions, to 
name just a couple. This is one of 
the most sought-after functions 
Post Video Production artists are 
after. Although QuickTimeis not 
able to fully play any SWF file 
that has ActionScript init, it’s 
still possible to get that media 
working in After Effects. Using a 
third-party application like 
Snapz Pro on the Mac you are 
able to select an area of your 
screen to doa screen grab and 
export at a range of broadcast 
quality resolutions. If you decide 
to do a full 768x576 at 25fps or 
640x480 at 30fps, a fast 
graphics card and internal drive 
would be needed. The one 
drawback is that you would lose 
your alpha transparency in the 
process, You can, however, set 
the layer options in After Effects 
to Overlay, that in turn will 
overlay the movie you created 
with the picture below, 


Re Once this scene has been completed, it's time 
to move onto the second scene. In order to 
create a seamless transition between scenes it is 
necessary to create keyframes at the end of the first 
scene. This can be achieved by selecting the last 
frame of each layer in the scene and 
Insert>Keyframe. Once selected Edit>Copy frames 
then Insert>Scene. 


In the new scene select the first frame then 

Edit>Paste frames. This will paste the last 
frames of the previous scene into the first of this 
new scene. 


Now all the elements are in place we can scale 


3 them, to create the illusion of movement into 


the distance. Create keyframes for both the bobbing 
head and the car at 200 frames. Select both and 
resize them to approximately 5 per cent. Then 
create a motion tween. 


4 | To create the illusion of the number plate 
flying toward the camera, select the car layer 
at Frame 75 and insert a keyframe. Break the object 
until the number plate is released as an individual 
element, select this element and turn into a symbol. 
Delete the keyframe, Insert>Clear keyframe and 
create a new layer. 


Select your text symbol at Frame 75 then 
Modify>Instance>Alpha=0 This should make 

the symbol transparent. Scale the image to about 

10 per cent of the original. Create motion tween. 


G Place the number plate symbol in the new 
layer on Frame 75, and position exactly on top 
of the existing number plate. Create a second 
keyframe at Frame 95, and scale the object so that 
the text only just fits within the workable area. 
Create a motion tween. 


Export your final animation as an SWF file and 
test it to see if it runs as expected. Now is a 
good time to compare it to your storyboard to see if 
it will integrate as expected with your current video 
media and audio. If you are satisfied go back to 
Flash and get ready to export to After Effects. 


music that 
will get you 
there 


G Create a new symbol within the library. With 
the rectangle tool draw a white square on one 
layer. On the second layer write the text ‘music that 
gets you there’. Again at Frame 75 Scenes 2, create 
a new layer, insert a keyframe and drag in your new 
text layer. At Frame 80 create a second keyframe. 
Scale and move this object to its final resting place. 


9 | Using the export function in Flash, there 
are two possible ways to achieve the alpha 
transparency output you're after. When using 
option 1, you would need QuickTime Pro to 
export as a Targa Sequence. 
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Part 4: Fresh surroundings? continued... 


Flash transitions 

Here is a list of some of the 
transitions in Flash: 

Skew, blink, bounce, fade in, fade 
out, blind, size bigger, size 
smaller, focus, add, subtract, 
slide in, slide out, pulse, morph, 
wave, rotate/flip, color change, 
and residual. Some of these 
transitions are combinable for an 
even greater choice of effects. 


10 Option 1: (Alpha-Transparency Targa : — 
sequence for After Effects) oO Option 2: (Alpha-Transparency QuickTime 


Export using QuickTime with the following settings. movie for After Effects) 

Set the output to match Movie. Export Using QuickTime Video. 

Select Alpha-Transparency. Set the output to match Movie. 

Do not select Use QuickTime compression. Select 32-Bit Alpha Channel. 

Select Controller as Standard Move Quality Bar to max. 

Do not select Loop. Select Compression Method Animation or 
Select the Pause at Start and Play Every Frame. Photo Jpeg. 

Select Flatten Movie. Disable Sound Output. 

Proceed to Step 12. Proceed to Step 13. 


Create a new Composition in After Effects 
with the following settings: 


W: 640 pixels. 

H: 480 pixels. 14 | Import your current footage files. If you decide 
Lock Aspect Ratio to (4:3). to import the Targa sequence files make sure 
30 frames per second. you select the Targa sequence check box. A dialog 
Set the duration to the length of your box will prompt you for the Alpha Transparency 
longest footage file. colour. Select Guess from the options. 


it 
Ba 


12 | Open the exported movie in QuickTime Pro 
12 50e 
and export it using the Save as Image 
Sequence then use the Tab below to select Targa 
sequence at 29.5 fps. 


OD ignore 
Q Treat As Straight (Urematied) E 
© treat As Premutioted (Halted vith color) , Fal is 


‘You an at a proferance to skip this daleg, = (Cancel) | aa | i 


If you created a QuickTime movie with the 
G Alpha-Transparency layer, simply import it. 
A dialogue box will prompt you for the Alpha 
Transparency colour. Select Guess from the options. 


Part 5: The finishing touches 


Add audio, filters and transformations then render. 
Make nice cup of coffee. Then admire your handiwork... 


joos 


es aN CEE Ce ESC 
You can add various filters and transformations 
G Drag your Flash created movie or Targa to your project before you render out the final 
sequence files to the Timeline editor. movie. Note: It is recommended to first render out a 
Now do the same with the audio. If needed, add draft, half size or lower frame rate version of your 
just the Audio to sync with the start of the Video. movie, before you make your final output render. 
Next place all your current video media in their This will save you time in correcting audio or 
appropriate positions. video sync errors. 
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music that 
will get you 
there 


If you are satisfied with the output, then 

change the settings to your final output at the 
full 30fps at best detail and full size. Depending on 
your CPU speed and original video file sizes, you 
may have enough time to go and enjoy your first 
coffee break and, by the time you get back, it 
should be done. EEX 


y hen 
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[the full Macromedia kit] 
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Combined creativity 


To get the most from Flash and Director you'll need to equip yourself with a few additional 
packages to help you along — from the obvious to the much more obscure... 


Photoshop 6 

Price: £480 

Phone: 020 8606 4000 

[w] www.adobe.com 

The obvious choice for creating, manipulating and 
crunching your Web graphics down to size. Even if 
your Flash or Shockwave site or presentation is vector- 
intensive, there may have to be a bitmap involved 
somewhere. Use Photoshop to create backgrounds, 
icons and text effects ready for placement in your 
finished file, but be careful to compress your images 
thoroughly otherwise you'll find your Flash or 
Shockwave movie takes a painfully long time to 
download — taking rather a lot of the point out of 
both applications’ capabilities. 


Fireworks 3 

Price: £179 

Phone: 020 8358 5857 

[w] www.macromedia.com 

Much in the same vein as Photoshop and ImageReady, 
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Fireworks is a great tool for creating, manipulating and 
optimising Web graphics. What's more, because it’s 
primarily vector-based and also manufactured by 
Macromedia, superb integration with both Flash and 


Illustrator 9 has a wealth of new features, including the ability to 
export your blended graphics as SWF animations. 


Director is guaranteed, proved by the fact that you can 
export directly to SWF. So, maybe dominance of a 
market by one big fat company ain't necessarily such a 
bad thing after all... 


Illustrator 9 

Price: £316 

Phone: 020 8606 4000 

[w] www.adobe.com 

The new SWF export within /llustrator 9 makes this 
industry-standard vector illustration tool perfect for 
creating and even animating high-quality vector 
graphics for use in Flash and Director. It's now even 
possible to create a complex, animated SWF movie 
simply by animating separate layers. All you need to do 
in Flash or Director is hit import and voila... a fully 
animated SWF movie. And don't forget that you can, of 
course, produce some top-quality vector artwork 
ready for direct export to Flash or Director for tweaking 
and animating. 


FreeHand 9 

Price: £380 

Phone: 020 8358 5857 

[w] www.macromedia.com 

As with Adobe Illustrator, Macromedia’s FreeHand has 
long been an industry-favourite vector tool. Again, a 
native Flash SWF export tool is here, along with a 
whole range of new animation effects, support for 
high-quality Flash printing and options for locking and 
protecting Flash artwork on the Web. There are also 
some great new tools such as the Perspective Grid, 
which can help in the generation and tweaking of 


FreeHand 9’s wide range of vector tools complement Flash's 
animation capabilities perfectly. You can even export directly to 
.swf from the application. 


perspective-correct artwork and vector shapes ready 
for export to Flash or Director. 


Dreamweaver 3 

Price: £299 

Phone: 020 8358 5857 

[w] www.macromedia.com 

The ultimate Web authoring application, perfect for 
implementing your Flash and Shockwave movies. 
Design simplicity combines with fantastic 
customisation features to bring an app that truly 
complements Flash and Director, both in the easy 


Dreamweaver 3is the perfect package to implement your Flash 
and Shockwave movies. A bonus point is its ability to provide 
real-time previews of movies. 


insertion of movies and the mightily handy real-time 
playback previews. 


GoLive 5 

Price: £233.83 

Phone: 020 8606 4000 

[w] www.adobe.com 

The other superb Web authoring tool, this time from 
Adobe. Improved support for dynamic-content Website 
creation with SWF heads up version 5’s superb feature 
set. GoLive is an ideal choice for bringing your Flash 
and Shockwave movies and games to the masses. 


I you know you have the fates 


Macromedia Flash Player 
notated, ack tar, 


Generator can automatically and dynamically update 
the content of Flash movies — proving mightily handy for 
personalised or constantly changing sites. 


arts 
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LiveMotion is Adobe's answer to Flash and has some great 
drawing tools and an AfterEffects-style Timeline. It can’t, 
however, compete with Flash’s interactive functions. 


Generator 2 

Price: approx £20k (Enterprise); £1,000 (Developer) 

Phone: 020 8358 5857 

[w] www.macromedia.com 

Macromedia Generator is the ultimate solution 

for delivering dynamic content graphically. With 
Generator, you have two choices: Generator 2 
Enterprise Edition is a high-performance, scalable 
solution for delivering real-time, visual content to 
audiences who require fast, personalized Websites, 
whereas Generator 2 Developer Edition is the 
data-driven solution for automatically updating Flash 
Websites. Either way, if you have to deliver and update 
Flash-based content fast, then Generator is for you. 


LiveMotion 

Price: £222 

Phone: 020 8606 4000 

[w] www.adobe.com 

Adobe's answer to Flash sadly can't really compete 
with Macromedia’s masterpiece in terms of 
interactivity features, but there's still some great 
animation and drawing tools here. An instantly 
recognisable Adobe interface and an AfterEffects- 
style Timeline should help Adobe fans begin to learn 
the basics of creating SWF movies for the Web, while 
its drag-and-drop capabilities with Photoshop and 
Illustrator are excellent. 


CorelDRAW 9 

Price: £464 

Phone: 0800 581028 

[w] www.corel.com/draw9/flash.htm 

Corel has recently released this Flash filter for 
CorelDRAW 9. It’s basically just a catch-up to 
FreeHand, but mightily handy as it allows the export 


SWiSH enables fantastic text effects to be exported in SWF 
format. It makes light work of creating banner ads, for example. 


Iilustrate!™ 5.0 


Illustrate! from [w] www.davidgould.com is a great plug-in for 
3D studio max that allows non-photorealistic rendering and 
outputs to SWF. Well worth a look. 


of scalable SWFs ready for use in Flash. If you've got 
CorelDRAW 9 and Flash and you haven't got this filter, 
you're seriously missing out. 


Corel RAVE 

Price: TBA (Part of CorelDRAW 10) 

Phone: 0800 581028 

[w] www.corel.com/news/2000/august/august_29_2000.htm 
In the soon-to-be released CorelDRAW 10, expecta 
treat for Flash fanatics, as Corel has introduced Corel 
RAVE (Real Animated Vector Effects) — a new 
application that introduces powerful new animation 
features into the suite, enabling the creation of Flash 
SWF movies. It sounds a lot like LiveMotion to us, but 
we don't know just how powerful it will be. Keep an eye 
out for the full review in Computer Arts very soon. 


SWiSH 

Price: $30 

Phone: Buy online 

[w] www.swishzone.com 

Creating intensive text effects within Flash has always 
been time-consuming, but luckily a few apps are 
cropping up that make the process a lot simpler. 
SWiSH is one such program that makes it incredibly 
simple to create some impressively complex text 
effects within Flash. If you happened to catch our 
tutorial in issue 50 of Computer Arts you'll know that 
this gem of an application can increase your 
productivity tenfold when creating banner ads and 
other text-driven movies. Head over to the SWiSHzone 
site now for a free evaluation. 


e-Picture Pro 

Price: $179 

Phone: Buy online 

[w] www.beatware.com 

Beatware's e-Picture Pro complements Flash 
perfectly. The program enables you to import and 
animate 3D models, create 3D text and produce 
enhanced animation paths. There is also a full set of 
Web compression tools to help you crunch your 
graphics down to manageable sizes. Then you simply 
export them to SWF. 


SWfx 

Price: $19.99 

Phone: Buy online 

[w] www.wildswfx.com 

Much in the same vein as SWiSH, Wildform’s 
cunningly titled SWfx is a quirky Flash text effects 
application that will seriously transform the way you 


SWIFT 3Dis a great application that allows the import of 3DS 
files ready for transformation into Flash movies. There're also 
built-in animation and modelling tools. 


work. With an intuitive (if a little wacky) interface, it'll 
allow you to easily create stunning SWF text effects in 
a matter of minutes. What’s more, it’s incredibly cheap 
— which makes it all the nicer... 


Vecta3D 

Price: $59 (standalone) $194 (plug-in for 3Ds max) 

Phone: Buy online 

[w] www.vecta3d.com 

The superb and well-known Vecta3D comes in two 
flavours. One is a standalone application designed for 
the creation of 3D graphics and animation intended for 
export to SWF, while the other fruitier flavour delivers a 
superb plug-in for 3D studio max which enables you to 
render your models and animations as SWF files ready 
for the Web. File sizes are kept surprisingly low too. 


SWIFT 3D 

Price: $139 

Phone: Buy online 

[w] www.swift3d.com 

With 3D on the Web being the hotly debated topic of 
the moment (and inevitably occupying the top spot on 
many clients’ wishlists...), it's no surprise there’s a bevy 
of ‘3D in Flash’ apps cropping up. Thankfully SWIFT 3D 
is one of the better ones, allowing the import of 3DS 
files (as well as EPS files) for the creation of superb, 
quick-loading SWF movies. There are also built-in 
animation and modelling tools to make your 3D-on- 
the-Web life much easier. 


With KoolMoves, you can produce simple animation and text 
effects for export to SWF. It’s a fun piece of software, but 
perhaps rather limited for the creative professional. 


Moho can bring out the cartoonist in you - it has good 
animation features that include skeleton manipulators to 
control characters. It also exports to SWF. 


Illustrate! 

Price: $395 

Phone: Buy online 

[w] www.davidgould.com 
Illustrate! is a non-photorealistic renderer for 
3D studio max that enables you to render your models _—_| 
or animations in a variety of artistic styles. It’s 
particularly handy for cartoon effects and — guess 
what — you can export the whole lot as an SWF. 


Moho 

Price: $99 

Phone: Buy online 

[w] www.lostmarble.com 

Mohois a 2D vector-based cartoon animation app that 
enables you to draw, paint and animate. The pick of the 
animation tools is the skeleton manipulator — making it 
a breeze to control complex characters. Once you've 
created your finished cartoon you can export the whole 
lot as a SWF file for Web playback, or even import it to 
Flash or Director for some finishing touches. 


SAXESS wave 


Price: Free 

Phone: Download 

[w] http://195.14.236.181/wave 
Formerly known as VisWeb, SAXESS wave is a | 
data-independent Shockwave Flash encoder. If you 
have any sort of XML code you need converted to 
Shockwave Flash, SAXESS wave will do the job for you, 


Vecta3D Standalone is 
(featuring new SHADED output!) only $59 ! 


Click below to 

see 

output examples: 
1 


At [w] www.vecta3d.com you can download the superb Vecta3D, 
a plug-in for 3D studio max that enables you to render your 3D 
models and animations to .swf format. 


E-COMMERCEY 


Much like SWiSH, Wildform's SWfx can create fantastic text 
effects. There's also a fully interactive demo at the company’s 
Website [w] www.wildswfx.com 


and do it surprisingly well. Heading up the feature list 
there’s superb text generation — Wave will connect to 
the system font server of the native graphics engine and 
convert requested fonts into SWF. There's also Flash 
Action and Button support. Not for everyone, but 
certainly useful for some. 


KoolMoves 

Price: $29.95 

Phone: Buy online 

[w] www.koolmoves.com 

With a fantastic name and easy-to-negotiate interface, 
KoolMoves is a great tool for producing simple, but fun 
animations. For serious cartoon animations it may be a 
bit too simplistic, but for the child in us all it’s a great 
piece of software that will entertain as well as produce 
some surprisingly good results. It’s also extremely easy 
to use and you can pick it up for the bargain price of 
$29.99. Head off to the URL to find some fantastic 
Web-based interactive tutorials. 


Swift-Generator 

Price: $100 Registration 

Phone: Register online 

[w] www.swift-tools 

Swift-Generator is a shareware dynamic Flash content 
generator. Much like Macromedia’s own Generator, it 
will dynamically replace text, fonts, sounds, images 


SWF for the masses 


Export to SWF and you'll keep 
everyone happy... 
With more and more Web-savvy animation programs hitting 
the shelves with export-to-SWF capability, it’s not surprising 
that the file format has hit the big time. The latest in the 
ever-expanding list of apps boasting about their SWF export 
prowess is Corel RAVE. 

Seemingly Corel’s answer to Adobe's LiveMotion, Corel 
RAVE (Real Animated Vector Effects) will include a bevy of 


vector drawing tools as well as advanced animation and 


interactivity tools and should complement the CorelDRAW 
Graphics Suite (in which it is included) perfectly. 


and movie clips in either a template file or a standard 
Flash file. If you’re looking for a cheap alternative to 
Generator, then this could be it. 


Flash Turbine 

Price: $395 

Phone: Buy online 

[w] www.blue-pac.com 

Flash Turbine is another dynamic Flash content 
generator enabling you to automatically grab content 
from sources such as text files, image files, ODBC- 
compliant databases and many others. Tables, lists and 
charts can also be generated from accessed content 
and Movie Clips and images can all be called upon. 
Aworthwhile addition to any Webmaster’s toolkit. 


Internet Mapper 

Price: Enquire online 

Phone: Web only 

[w] www.imapper.com/iNews19990803.htm 

Maps on the Web seem like a great idea — until you 
find that you have to sort through tons of pages to find 
the magnification level you need. However /nternet 
Mapper has come up with the perfect solution — Flash 
Mapping Server. You can now experience the delights 
of Flash — pan, zoom, highlight with no page reload, 
vector graphics, in-built anti-aliasing and small file 
sizes. Obviously this is not going to be for everyone, but 
if you — or your company — happen to produce reams 
and reams of maps, then it could be a new solution to 
an old problem. 


Form2Flash 

Price: Free 

Phone: Download only 

[w] www. kessels.com/Form2Flash/ index.html 

Form2Flashis a great application that uses HTML 
forms to change Flash movies. Within this easy-to-use 
application you can quickly and simply change the 
content of any text field in a Flash movie dynamically 
and accurately. Using no complicated scripts or 
configuration techniques (simply edit your HTML in any 
text editor) Form2Flash could be the perfect introduction 
to dynamic Flash content. It can also be used to jump to 
a variable URL, change the label of a goto action and the 
name of objects and frames. What's more, it’s free to 
download, even for commercial use. FEES 


Another, higher-end technology has also given its toolset a 
much need SWF boost — toonboom’s professional 2D cell 
animation package, USAnimation. Although this is currently 
the only professional 2D animation software to support the 
Flash format, it will surely open the eyes of users to the 
possibilities of producing graphically intensive, dynamic 
animations for the Web that will download in no time at all. 
And what will be the result of all this new SWF-ability? Well, 
expect a plethora of professional quality cartoons to be 


hitting your browser soon... 
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Little Russell Street 
Big ideas 


Great future 


Soholondon is unique. 


SohoLondon 


¢ 


ist one tool of the Web,” says Jamie Innes, art and 
‘Tt’s what you do with that 


production director at SohoLondon. 


eaching the fickle hearts and pockets of | standing still, Innes lists [w] www.90minutes.co.uk and 

pre-teen boyband groupies and gameheads | [w] www.dianaplayground.co.uk. 

isn't easy. So when repositioning a brand of | Nevertheless, Innes is wary. “It’s dangerous to think 
| 


\ hot, milky drink to appeal to 8-12 year olds, the Web is just Flash. Flash is just one tool — it’s 
some hip‘r’killer Flash is the natural way to go. Cue important to know how it fits in the context of Web 
Ovaltinepower at [w] www.ovaltinepower.co.uk — an production tools and know where its strengths and 


elaborate mix of addictive Flash games and cunning weaknesses lie.” He rates Flash’s cross-platform 
branding created by the web design agency (and, by all and cross-browser compatibility as probably its 
accounts, formidable softball team) SohoLondon. greatest asset; knowing the design will look the same 

The Ovaltine games, which include a funky Flashed for everyone with the Flash plug-in affords designers 
version of television's The Generation Game and taxing the luxury of focusing purely on “content, message, 
teenpop trivia, are tightly constructed and beautifully and functionality”. 
drawn. They even unleash a motley assortment of well One thing irks Innes, however; “There's a steep 
fleshed, original cartoon characters, such as Morg the learning curve — each version released requires a new 
superhero mouse. type of scripting language to be learned.” He would 

The trickiest part of the three-month project was, | also like to see a good drawing tool like Freehand 
according to art and production director Jamie Innes incorporated to speed up development time. 
“trying to relate as many of the games back to the Head fixed squarely on his shoulders, Innes 
product while ensuring they were entertaining and | believes designers have to remember the needs of the 
addictive”. Not easy for a product containing no fizzor | end-user and the brand messages that need to be 
brain-chemistry altering chemicals. conveyed. In light of this, Flash shouldn't be used 

But SohoLondon proved itself well up to the where the content doesn't demand it. Flash may look 
challenge, which isn't all that surprising giventhatsome | great but its success has everything to do with brains 
60 per cent of the work undertaken by the agency uses | and less with brawn. 
Flash elements. These can be seen on sites such as “Developers have to understand what the content 
Mywapworld at [w] www.mywapworld.com, where Flash | needs to do and use Flash intelligently,” concludes 
is used to breathe life into a navigable map allowing Innes. Image is nothing, purpose is everything — Flash 
you to zoom in and around. SohoLondon appreciates | gives a definite jolt to that purpose. EIS 
the opportunity Flash provides to create Web sites that 
surprise and ensnare visitors. As examples of dynamic =) You can contact SchoLondon on [t] 020 7404 0303 

or check out their site at [w] www.SohoLondon.com 


SohoLondon Web design that leave crusty HTML 
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FRISKIES 


We completed 4 
campaigns for 2 
produ 


10 Room 

6 Degrees 

Abigail's Party 

All Bar One 
Aiphabet 

Amati 

Annexe 

Astral Club 

Atlantic Bar and Grill 
Bar Code 

Bar Soho 

Barra 

Blues Bistro and Bar 


Boardwalk 


~ 


Lovaltinepowet.co.uk/ovaltine.asp bd 


1. [w] www.SohoLondon.com The SohoLondon site was designed to be accessible for all users. 
Flash and Shockwave versions are available alongside the standard HTML pages. These enabled 
SohoLondon to demonstrate their Flash/Shockwave prowess while providing key information 
about the company to any potential clients without the relevant plug-ins — always a good idea. 


2. [w] www.90minutes.co.uk The brief for the Nike site was to create an engaging and 
entertaining online game based on the football training drills depicted in accompanying 
advertisements. SohoLondon created an innovative Shockwave navigation system based on 
dribbling around the screen. When a visitor completes these exercises they are rewarded with 
further Flash and Shockwave information, games, and competitions. 


3. [w] www.ovaltinepower.co.uk Shockwave was used to bring smart and cool street-cred 
elements and characters into the Ovaltine brand. The site is filled with Flash and Shockwave 
games, challenges and a branded browser making the site more of an experience than just a 
promotional tool. 


4. [w] www.draftuk.com SohoLondon used Flash to enhance the DraftUK site by seamlessly 
merging Flash content within HTML documents. This enabled the designers to employ advanced 
techniques and presentations that are impossible with just plain-flavoured HTML. 


5. [w] www.mywapworld.com SohoLondon created a content-rich Web/WAP site guide to 
eating and drinking in Soho using Flash to present an innovative interface, an interactive map 
and a cool bus. 


6. [w] www.dianaplayground.co.uk The Diana Memorial Playground incorporates a unique 
virtual guide for navigation. This is designed to encourage users to explore the site and reflect 
the spirit of fun and adventure of the actual playground. 
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Advanced Server Interaction 


We're all for an easy life, so when it comes to site maintenance 


your Flash files shouldn't be too labour intensive... 


veryone wants a visually and 
technically impressive site, 
but if you regularly design for 
| non-technical clients, you'll 
be used to the problem of how to make it 
whizzy in the aforementioned sense and 
easy for them to access and maintain. 

Plus, if you get a maintenance contract 
to do the updating on their behalf, you'll 
be doing yourself a bundle of future 
favours by building it in such a way that 
updates and additions are a 10-minutes- 
a-week twiddle. 

And this is where Flash often becomes 
problematic: updating the content in Flash 
files can be time-consuming for the 
seasoned designer, let alone your client's 


office temp; and especially so if it 
includes stacks of fancy ActionScript 
trickery. One solution is Macromedia's 
Generator, but it’s a little pricey for a small 
company to justify and its technical 
subtleties make it a beast to master. 

So the aim here is to explore the 
alternatives, the principle being to use 
existing core Flash techniques, connect 
them up with easy-access external text 
files, and use this double-act to build 
simple but rather nifty Flash-based 
applications that you can easily update by 
hand, or plug into a standard ASP-style 
backend database. 

A little effort saves a stack of work later. 
And that is truly a Good Thing... 


Enter your name: 


Teams 


—— - i 3 | Save and export this, then create the next 

First design a funky login screen (okay, ours is Then add an OK button, right-click and choose screen, and include in there a text area with 
quite simple), setting the Text Options for the Actions, and add a Basic Actions>Load Movie the Text Options set to Dynamic Text, and the 
name field to Input Text, and in the Variable field action on release. Set the URL to the SWF movie for __ variable set to ‘name’ as well. Now export this, 

type ‘name’. This is going to be the name of the the next screen your user sees, set the Level to 0, embed the first movie in a Web page, and test the 

variable that holds and transports your user'sname. _and for Variables choose Send Using GET. login: it welcomes you. 


problem with Flash i is it can be a nightmare to update — but you can solve 
y “sae the movie to import content from simple text files on-the-fly... 


&e The basic principle uses variables again, using 


- 3 | Now you need to create the text file, where 
the Actions>Load Variables action to get Add the Load Variables action to the button on 


you state the variable — in this case it's called 
values from a text file (which must be on your own release, setting the relative URL for the text file ‘name’ — and set its value (‘Bob’ let's say) by typing 
server). First create a simple scene like this, including you want to put the info into. You can leave simply name=Bob. Then save the text file and test 
a dynamic text field with the variable called ‘name’. Location at Level 0 and Variables as Don't Send. the movie. 


eo 32 @ 36 
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My+name+istbob% 
2E+What+youtcantseetintthe+lE+windowsis+this% 
2C+but+escaped%2E%2E%2E 


Feb Senor Hee 
% = Server. URLEncode( "My name is & 

bob. What you can see in the IE 

window is this, but escaped..." ) %: 


To solve this problem, use server-side scripts. 


There are several ways to escape text. You can If you're using an ASP server, such as MS 
type it in your Internet Explorer address bar, Personal Web Server (free with Windows), you can 
The format of this is URL-encoded, however, hit [Return] and see what /E converts it to, but this use the VBScript command <% = Server. URLEncode 
which means you can't just type anything: isn't much use for too much text. Or you can use (“Text to be escaped" ) %>, and give the text file 
special characters, like a space, have special the JavaScript command escape (‘Text to be the .asp ending. Flash still understands the text file, 
symbols. This is called Escaping, and follows the escaped’), but this causes problems if your text provided that you remember to change the URL in 
form of complex URLs in your browser address bar. contains apostrophes the Load Variables action. 
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Author 
Body 


Now put all your variable statements in the 

same text file, separated by ‘&', and with no 
spaces. So you should have something like 
title=This+Is+The+Title&body=Body+copy+in+here 
&author=John+Smith. Now your Load Variables 
command completes all the text spaces. 


Of course, you'll probably want more than 

one text field for your movie content — but you 
still only need one text file. First give all your 
dynamic text fields different variable names, like 
‘title’, ‘body’ and ‘author’. 


[emtheanthorts | 


9 | It's now easy to plug your Flash into a back-end 
database, by including simple VBScript, CFML 
or similar in the source text file, and giving it the 
relevant ending. The server generates the contents 
of the text file on the fly, and the whole movie is 
easy for anyone to update. 


Part 3: Password login 


All this gives you the techniques to create a simple Flash password login system... 


i Create a login screen like that in Part 1, but 
with space for a password too. The essential 
aspect of a password login is that the browser goes 
back to the server to check the password — it's not 
contained anywhere in the actual SWF file, because 
then your password isn’t safe from prying eyes. 


First name the dynamic password field variable 
2 : 

‘password1', and put a text file on your server 
setting the variable password2=123456. Then adda 
Load Variables action to your OK button on release, 
loading in the password text file. 


3 | Then add an Actions>!f action, setting it to: 


if (password=password2) { 
loadMovie (“access.swf", 0); 
Jelse { 

loadMovie (“fail.swf", 0); 

} 


This redirects the user according to whether they've 
got the password right. You're done. 


Part 4: Search box 


It's easy to add a simple search tool to your Flash pages... 


ae You'll need a pre-existing backend structure 
for the search, which will be almost exactly the 
same files and code as for a normal HTML page 
search facility. But the output file will have a slightly 
different structure: it'll pass variables in the 
URL-encoded format. 


Create an input text field for your user's 

keywords — you may have to give it a special 
variable name for the backend scripts — and create a 
search button next to it. Then add a Load Variables 
action pointing to search.asp and send variables 
with it — these will be the keywords. 
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gy Finally, you just need to structure the 
search.asp file so that rather than turning out 
HTML, it turns out results in the URL-encoded form, 
results=<results here>, which load into a simple 
Flash dynamic text field called ‘results’. 


Part 5: Flash discussion board — sign up 


So now, in theory, you have all the techniques to create a Flash discussion forum, aside from the backend 
database, for which you can use U/traDev*. We'll explain the techniques using ASP and VBScript, but it’s 


just the same for JSP and CFML. 


* Check out the Computer Arts 
Dreamweaver and UltraDev 
Special (issue 11) for details 
on this. 


reer s - 
Pf] In principle you need just five elements: a login 

screen, a list of messages, a message-reading 
screen, a message writing form, and a sign-up or 
register form. These connect into two database 
elements — one of users and one of messages — via 
ASP or similar text files. 


First create your register screen with input text 
areas, and remember to give them all useful 

variable names. Include user name, password and 

any other info you need to get from your users. 


mm = = A 


Create a button for submitting the form, and 
attach a Basic Actions>Get URL action to it; set 
the URL to the file that will deal with writing the 
user's details into the database — a CGI perhaps — 
and then redirect them to the page containing the 
list of messages. You'll also need to set Send Variables 
to either POST or GET, depending on your backend. 


Part 6: Flash discussion board — login and message list 


We can now create the actual messageboard... 


srs sem *| 


username 


RSE = 
eet: 
password 


First design a password login screen, with 

a username input field — call the variable 
‘username’ — and a password field, with the 
variable ‘password’. 


So as it leaves the server this ASP page 
contains something like 
password2=bobspassword, and that's what Flash 
gets in response to its Load Variables. Now you add 
another action to the OK button which checks if 
password2 is the same as password, and takes the 
users to a failure screen if not, or into the message 
board SWF if so. 


<%@@LANGUAGE="VBSCRIPT"%0: 
<object RUNAT="Server" ID="rel" 
PROGID="ADODB Recordset"></object> 


|password2=<% = Server URLEncode( password ) %> 


userma 


passwoml 


pee fewaicizesi>s-t 


Now attach a Load Variables to your OK 
button, setting the URL to login.asp and 
Sending Variables using the GET method. This 
concatenates the URL to read something like 
login.asp?username=bob& password=bobspassword 


3 | The ASP file needs to contain VBScript which 
gets the username: <%username=request 
(‘username’) %> This searches the database for the 
user's password, and writes this to the ASP file 
dynamically using the code form password2=<% = 
Server. URLEncode( password ) %> 


a 


Add a Frame action here to load a variables file 
called lastestmessages.asp, which needs to 
contain the variables 

message1=xxx &message2=xxx&... &message5=Xxxx 
Use VBScript to get the subject lines of the last five 
messages and plug them in there instead of xxx. 


G Here you build the list of the latest messages — 
up to five, say, for simplicty. First create a 
design, and then turn all the text spaces into 
dynamic text areas, with variable names like 
message’, message2, and so on. 
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Part 6: login and message list continued... 


message! =<% = Server. URLEncode( message! ) 
%o>&messagel ID=<% = Server. URLEncode( 
message ID ) %>&message2=<% = 


Server. URLEncode( message? ) 
o>&message2ID=<% = Server URLEncode( 
message2ID ) %>&message3=<% = 

Server. URLEncode( message3 ) 
%>&message3ID=<% = Server. URLEncode( 
message3ID ) % >&| 


You also need to include messagelD variables, 

so that when the user clicks to read one, the 
backend knows which message to show; so also 
include variables message1/D=x&message2/D=x&... 
&message5/D=x These can be numbers, say in the 
form 5.2, where 5 represents the thread number 
and 2 the message number in that thread. 


8 | Now turn the messages’ subject lines into 
button symbols, with a blank square behind so 
they're easy to click. Then add an on-release action 

to each, first setting a variable message=message1/D 
(change 1 to the right number for each button), and 
then loading variables from the file message.asp, 
sending variables using the GET method. 


2message=Whats27s+all-t 
phe fiass~about*43l' &writer=Hob+Smthadbody= 


Peete eine | 
9 | This calls a URL like message.asp?message=5.2 
and the ASP file finds this message from the 
database, plugs the relevant info into the gaps, so 
you get a text file like message=<message 
title>&writer=<who wrote it>&body=<words go in 


here>&date=<date written> and so on — which 
loads into Flash. 


Part 7: Discussion board - reading and writing messages 
Setting up Input screens, Send buttons and all the other kind of bits 


and pieces that makes a board, er... work... 


i] At Frame 2 design a screen for showing the 
message, with dynamic text areas for all the 
different elements of the message - title, author, 
date, body, etc - and give these variable names the 
same as in your message.asp variables file. 


Post a new message 
RRR a 


Finally, you need to add your message-writing 
screen. Add a Post New Message button, 
taking users to Frame 3 (with a Stop action there), 
and design your message form with subject line and 
message body text areas, giving them useful 
variable names. 
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You also need to put Stop actions on Frames 1 

and 2, and then on your message title buttons 
at this frame add a Go To Frame 2 action, so the 
SWF file waits for your user to choose a message to 
read. This then loads in the relevant message, and 
shows it at Frame 2. 


8 Then add a Send button, giving it a Get URL 
action calling a CGI or similar script for writing 
the message into the database, just like the sign-up 
screen. Be sure to Send Variables here, too. 


3 | You might find it awkward not knowing how 
long the message is; so you can, say, append 
the date on the end by setting the action 
fullmessage = body + “ “ + date You can also put 
the message in a scrolling text field. 


G Now all you need do is send the writer back to 
the message list and update the messages 
there using the same techniques, and you're more 
or less done — give or take a bit of polishing. FEES 


the Sex (iSSue 


FOR ALL PROFESSIONAL 
WEBSITE DESIGNERS 


Making a great website is about keeping abreast 
of the best ideas. That's why every month, 
Cre@teOnline uncovers the most innovative and 
imaginative sites on the Web, exploring what 
makes them special and who put them together. 
We also talk to the luminaries taking this 
industry forward, and reveal all you need to 
know to stay one step ahead of the game. 


IN ISSUE FIVE: 


HOW TO CREATE WINNING PITCHES 

We find out what it takes to make pitches that win accounts. 
We talk to three of the best design agencies in the business 
and discover how they present pitches that work. We take an 
in-depth look at how three different accounts were won and 
we report on what you can do to improve your own technique. 


THE TRICKS IN ONLINE SEX SITES 

Online sex sites might look dire but there's plenty they can 
teach us about good design principles. We take a look at how 
sex sites get people to cough up cash before looking at the 
site, and we explore how personalisation issues are already 
taking sex sites into new realms. If you ever needed an excuse 
to look at porn, this is it. 


PLUS: How games developers are taking their wares onto WAP. 


Web video and the new Media Cleaner 5 - we've got designers 
to offer their views. 


Seven professionals debate the pitching technique — how to do 
it better and the pitfalls to avoid. 


Design agency Lateral come up with a new way to avoid the 
problems of getting too big. 


CD AND MAGAZINE: £5 


ON SALE NOW 


Elektonika 


This Sherwood-based company is a band of three, “here to rid the 
world of mediocre multimedia and dodgy digital cowboys...” 


lektonika is a “nu-meeja” company 
consisting of a “Flasher, a pixel pusher and a 
nerd”. The first is Jules Stevenson, the 

\ j animator and 3D expert of the three; George 
Benson is a graphic and video artist; while Sam 
Underwood describes himself as the “hardcore 
programmer”. Most of their current work is in Web 
design, but the company’s background includes 
installations, kiosks, CD-ROMs, presentations, video, 
music, 3D and branding. 

“We all studied at Wolverhampton University,” Sam 
explains. “I did Interactive Multimedia 
Communications — Jules and George did Electronic 
Media. The name Elektonika was actually the 
misspelling of an email account. Images popped up in 
our heads of bottles of magic drink — the Elektonik — 
and that was it...” 

The spelling mistake has paid off, as a trail of 
Websites and a client-heavy CV goes to prove. Point 
your browser at [w] www.capoeira-twins.com the 
official site for the Capoeira Twins that’s won acclaim 
from Dazed & Confused, Macromedia and Creative 
Review. Or head to [w] www.mustardpot.com, the Flash 
4-generated digital sketchpad that's a mix of design 
links, multimedia, art and chaos. 

These sites showcase only one side of Elektonika’s 
Flash expertise — the team also use it for CD-ROM 
interfaces, animation and design work: “Flash is cool if 
you want to make fully animated, scalable graphics 
without massive file sizes,” Sam enthuses. “This is 
invaluable for Web and game work, and Flash does 
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wé will take yo 


overcome some of the authoring nightmares presented 
by a world of differing browsers and operating systems.” 

The company workhorse is PC-based, made up of 
two 900MHz Athlons with 256MB RAM and 30GB 
HDs, plus one 400MHz Dual Pentium II. The Flash 
techniques vary between the three members, as 
George explains: “I use FreeHand 9a lot first. It gives 
me accurate control for layout and design.” Jules, on 
the other hand, does most of his illustrative work in 
Flash. “The drawing tools assist my illustration style...” 

Two years’ worth of experience has left the 
Elektonika HQ stacked high with Flash tips, and Sam 
has a personal list: “Using movie clips rather than 
graphics helps to bring the file size down. LoadMovie 
is good for breaking your swf down into more easily 
loadable chunks and enabling multiple designers to 
work on the same project. Also, use www.were- 
here.com, one of the finest forums. And if something 
can be scripted, do so — scripting is much smaller than 
tweening. Oh, and make the loader interesting — you 
might think percentage loaders are great but they're 
boring. Most peeps only have 56k or even 28k 
modems — they'll leave if they’re not entertained.” 

When it comes to entertainment, Elektonika has its 
own plans. “We plan to continue breaking the rules, and 
position ourselves as one of the premiere nu-meeja 
companies.” Digital cowboys be afraid... 


throug 


released on 4x3 


the debut single from the 
capoeira twins released Sept 
18th on FFRR featuring a 
remix by Mr. Scruff. 


Get on the capoeira twins 
mailing list for tiptop news and 
events by chucking your email 

below... no spam guaranteed 


1. This storyboard-style image shows the hype animation 
Elektonika produced for the Capoeira Twins’ debut single Four. 
Created almost entirely using Flash 4, this is a dynamic 
animation accompanied by sound loops. Sam Underwood 
explains; “This took around two weeks to create. The idea is 
based on the groove of the tune and what it conjured up in our 
and the Capoeira Twins’ minds.” 


2. “This was one of our earlier projects,” Sam begins. “It’s from 
a logo animation we did for a friend who was organising a graffiti 
exhibition in London. It was created in Flash 3 and took a day to 
produce. The idea is based on the logo and the significance it 
has in graffiti culture — it's what a artist sprays as he runs away 
when he’s been rumbled...” 


3. “This is the inner spread of a brochure George produced to 
accompany the logo, Director presentation and Website for 
snowboarding company Rogue Boarder,” Sam explains. “It was 
made in FreeHand 9with further elements done in Flash. This 
took about three days to produce - excluding planning.” 


DA CREW FREEBEES MUSICK 


4. This image is taken from Jules’ V2 (Future) Mustardpot — 

[w] www.mustardpot.com/v2/jules_v2/index.html Created in 
Flash 4 (Flash 3 format) and 3D studio max 2.5(with Vecta 3D 
plug-in), this animation showcases Jules’ talents for 
low-polygon 3D modelling, music-making and Flash. 


5. Created in Flash 4 by Jules, the characters here will feature in 
anew DJ game Rewind for digital TV channel brand Playjam. 
“We developed the idea — our knowledge of DJing, music and 
club culture helped us to arrive at the feel for this game.” 


6. Images from the new Capoeira Twins site. “Created using 
Flash 4 and some HTML (for fast plain text delivery), the site's 
taken a month to create — including brainstorming sessions and 
drunken chats...” Head to [w] www.capoeira-twins .com 
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A 3D engine 
for Flash 5 


There are several methods of getting 3D 

content into Flash — most of them increase file 
sizes considerably. Using Actionscript to create 
a 3D engine in Flash 5 could be your answer... 


Din Flash looks good — it 
( adds a degree of ‘wow’ to 

our sites, and as we're all 

constantly being reminded, 
if we don't build in a degree of ‘wow’ then 
the viewing public may wander off 
elsewhere. But how do you do it? 

Previously you would create your 3D 

object in a package such as Lightwave or 
3D studio max, render it and then trace 


over each of the frames to create a 
vector version that Flash can import. 
The problem is, of course, that if your 
content suddenly has to be modified 
because either the brief has changed 
(clients can be like that...) or you're just 
not happy with a certain aspect of it, what 
do you do? Go through the whole process 
again? Groan... 

This isn't so bad if you're using a 


Wustratio 


magictorch com 
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third-party application like Swish3D 
which can take a 3D file and create the 
Flash animation, but if you’ve traced by 
hand then you're facing a start-from- 
scratch nightmare. Added to that, both 
methods result in fairly large files, so 
surely there has to be a viable and more 
user-friendly alternative? 

Indeed there is — dynamic 3D using 
Actionscript. Some people have created 
real-time dynamic 3D systems in Flash, 
but most of these are ‘sprite’ based — 
mainly rotating balls. Few have created 
wireframe engines, which is exactly what 
we're going to do here using Flash 5. 

The 3D wireframe engine presented 
here is fairly simple. It takes a single 
object description, rotates it around its 
own axis and then uses perspective 
projection to draw it onto the Flashstage. 
And the clever bit is that it’s powerful 
enough to create a fairly complex 
animation that takes up relatively little 
space in the final .swf file. 

It would be nice if we could simply 


import an object from a modelling 
package but that would be far beyond 
the scope of this article. Instead, we 
have to enter the object by hand. Flash 5 
has made this easier by introducing 
arrays into the Actionscript language. 


Describing a 3D object 


The simplest 3D primitive we can 
design in this way is a cube. Having 
eight corners, it can be described by 


eight 3D points, each consisting of X, ¥ 
and Z co-ordinates. An easy way to 
represent these co-ordinates, is to use 
three arrays, one per axis: 


var XCoords =[100,-100,100,100, 
100,-100,-100,100]; 

var YCoords = [100,100,-100,-100, 
100,100,-100,-100]; 

var ZCoords =[300,300,300,300, 
100,100,100,100]; 


3D rotation sans matrices? See the panel on page 89 for the formulae to make it spin... 


We also have to tell the engine how 
many points there are: 


Var NumPoints = 8; 


We can use this approach to describe 
any 3D object we want, but it only 
describes which points make up that 
object. This is fine, but we need to take 
this a step further by describing how 
these points are connected in order to 
build a wireframe representation. A 
wireframe cube has eight points, so it 
needs 12 lines to connect them. The 
code that draws these uses a structure 
that mimics a ‘join-the-dots’ picture. 
First, we have to tell the engine how 
many lines it is expected to draw: 


Var NumLines = 12; 


Then we have an array made up of 12 
pairs of numbers. Each pair describes 
the start- and end-point of a line. The 
array looks like: 


var Lines =[0,1,1,2,2,3,3,0,4,5,5,6, 
6,774,0,4,1,5,2,6,3,7]; 


The first line to be drawn is point ‘0’ to 
point ‘1’. These figures are ‘indexes’ into 
the co-ordinate arrays. That means the 
start point of the first line can be found 
at index 0 in the co-ordinate arrays, and 
the end point can be found at index 1 in 
the co-ordinate arrays. 


Rotating the object 


The functions RotateX, RotateY and 
RotateZ perform the mathematics 
needed to rotate the object we 
described. Each function takes all the 
co-ordinates in the object structures 
and applies a series of mathematical 
formulae, which simulates 3D motion to 
the angles specified. The rotations are 
applied to ‘copies’ of the 3D 
co-ordinates. If we were to apply them 
to the originals, then pretty soon the 
object would deform out of all 
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recognition. Each of the rotation 
functions applies the maths and stores 
the results in another array, and the next 
function picks up the results, and so on. 
In the end we are left with an array that 
contains a copy of the original object 
arrays in their rotated state. 


Drawing the object 


Once the object has been rotated, it has 
to be drawn. Before we do this, however, 
we have to convert the 3D co-ordinates 
into 2D. This is done using a 
‘perspective transform’. This takes all 
the 3D points and divides the X and Y 
co-ordinates with the Z. This has the 
effect of making points that are further 
away on the z-axis look smaller than 
those that are closer. It doesn't end 
there, though, as this would only apply 
‘depth’ to the 3D co-ordinates. 

The 3D origin is at 0,0,0 and this is in 
the centre of the screen, the 2D origin is 
at 0,0 and is at the top left of the screen. 
To convert 3D to 2D we simply add half 
the horizontal screen size to X and half 
the vertical screen size to ¥. The formula 
works because X extending to the left is 
in negative terms, and Y extending 
upwards is in negative terms. 

An example is: if the rotated X = -20 
and the screen size is 550, we add 225 
to -20 to get 205. However, if the 


rotated X is 20 and the screen size is 
550, we add 225 to 20 to get 245. 

This means that effectively the origin is 
still at the centre of the screen, but 
now it’s expressed in terms of the 2D 
co-ordinate system. 


Drawing lines 


Flash doesn't have any capability to 
draw lines at run time. To do this we 


3D Co-ordinates 


You will notice a few ‘negative’ numbers 
among the list of co-ordinates used in our 3D 
engine. In Flash the 2D co-ordinate system 
starts at the top left of the stage with the 
X-axis progressing right, and Y-axis 
progressing down. Both sets of co-ordinates 
use only ‘positive’ numbers. By using X and Y 
we can describe any single point in the Flash 
stage. But if we wanted to describe depth we 
would have to add a third axis — ‘Z’. By using 
X, ¥ and Z we can now specify any point in 
3D space. The starting point for our 3D 
co-ordinate system (its origin) is the centre of 
the screen. Each axis goes in positive and 


negative directions — as per this diagram. 


Flash 3D - the possibilities 


There's a whole new world waiting out there — and it's moving... 


Dynamic 3D in Actionscript 
reveals completely new 
possibilities for Flash. We're no 
longer stuck with just importing 
fixed animations created by 
tracing or converting 3D model 
files. We can now control what 


form the animation will take and 


how it behaves in interaction. 
At its most basic level the 3D 
engine can be used to provide 
simple graphic devices that can 
add extra value to an otherwise 
‘normal’ site. The DerBauer site 
at [w] www.Derbauer.de uses a 


simple 3D engine to rotate some 


The DerBauer 3D engine; it doesn’t do loads but it does look good. 
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‘balls’ — but it looks good. 

Some have taken it upon 
themselves to try and create 3D 
menu systems which are more 
intuitive to use than simple 
‘hyper-links’. One such project is 
[w] www-typospace.com While 


these engines are in their very. 


ok) 
{-100,-400,-100) 


have to employ a trick, and that is 

to position and scale a symbol so that 
it looks like we are drawing lines of any 
angle and length. Fortunately this is 
not too hard. The first thing we have to 
do is to create a movieclip symbol of a 
45-degree line which has the exact 
dimensions of 100 by 100. We then 
position this symbol using the two- 
dimensional X and Y co-ordinates 


early stages, such systems could 
form the future of site navigation 

Finally, we could go one stage 
further in 3D sites and create 
full games that make use of the 
3D engine. Imagine what that 
classic game Elite would look 
like in Flash! 


The typospace nav system uses a 3D ‘flower’ for hyperlink points 


' 
k 


e. 


The 3D co-ordinate system, expressed in X, Y and Z. 


converted from the 3D rotated 
co-ordinates. The end point (at X1, ¥1) 
of the line is used as the scaling factor 
— using this equation: 


X-Scale =X1—X 
¥-Scale = Y1—Y 


At first it is a little hard to see why this 
works — but it does. 


Extending the engine 


This is only a very simple 3D engine to 
show how dynamic 3D can be achieved 
in Flash — with a little imagination 

and some experimentation it could be 
extended to do much more. The engine 
itself could be changed to handle more 
than the single object it currently does. 
It could also be made portable so that 
the object description structures are 
passed to the engine to draw rather 
than being static. And to make the 
objects seem more solid, you could 
remove the lines that would be 
obscured from the viewer using a 
‘hidden-line’ algorithm. 

An animation sequencer could 
also be built. This sequencer could 
control which 3D object is displayed 
where and when, at whatever angle and 
scale — providing the capability for a 
complex animation that would 
otherwise have taken a long time to 
create and, just as importantly, a lot of 
space in the output .swf file. 

Other factors such as the line colour 
and line definition could be changed to 
give a more varied look. For instance, by 
varying the alpha value over the line, 
you could achieve a truly unique 3D 
experience. Your imagination really is 
the only limit! [eal 


Applying the formulae 


Normally 3D rotation is achieved 
through the use of matrices, but 
for simplicity this 3D engine does 
not use them. Instead we apply 
three sets of formulae to each 
co-ordinate triplet. The order they 
are applied is important, otherwise 
the rotation would not work 
correctly and the object would be 


twisted out of shape. 


Rotate around x-axis: 
X1=X 

Y1=cos(angle)« Y- sin(angle) + Z 
Z1= sin(angle)« ¥+cos(angle)»Z 


Rotate around y-axis: 
X2=cos(angle)+ X1- sin(angle)« Z1 
y2=Y1 

Z2 = sin(angle)+ X1 + cos(angle) + Z1 


Rotate around z-axis: 

X3= cos(angle) « X2- sin(angle) + ¥2 
¥3 =sin(angle)»« X2 + cos(angle)» ¥2 
Z3=Z2 


Converting to 2D 


Although all the points have been 
rotated they are still in 3D space, 
and we need to convert them to 
2D space. This is done with the 
help of a perspective projection 
function and the formula we use to 


do this is: 


X= (X3« viewpor/AZ3+scale)+Xsize 
Y¥=(¥3 + viewport) (Z3+scale)+¥size 


Xsize is the horizontal size of the 
movie divided by two, and ¥size 
is the vertical size of the movie 
divided by two. 


Scaling up the Z co-ordinate affects 
how much optical depth is present 
in the drawn 3D object. The 

viewport variable defines how close 
or how far away the viewer is from 
the object. Play with these values to 
see what effect they have. 


Putting it all together 


You've got the theory, you've got the formulae... you've almost certainly 
got the headache — might as well try it out... 


Get the code from 
your cover CD... 


At steps 4 and 5, you need to 
enter code to get the functions to 
work. Rather than making you 
type it all in, we've included the 
relevant files in text format in the 
dual\tutorial\3Dflash folder of 
your cover CD. 


Create a new Flash movie. Leave the dimensions 

at default, but change the frame rate to 25fps 2] Create a new movieclip symbol and call it Line. 
and the background colour to black (#000000). Create Select the line tool with the colour set to white 
four layers and name them Background, Lines, Code (#FFFFFF) and the stroke set to 0.1 and draw from the 
and Functions. centre to 100,100 exactly. 


Create a keyframe at Frame 1 on the Functions 

layer by selecting the layer and hitting F6. 
Double-click frame to bring up the Actionscript entry 
dialog. Go into Expert mode through the Context 
menu and enter the function code listing (The file 
function.txt is on the cover CD). 


3 | Go back to the main movie timeline and drag an 
instance of the Line movieclip from the library to 
the stage on the Lines layer and call the instance Line. 
Position it far off the stage so that it will not appear in 
the final movie. 


Create a keyframe at Frame 2 on the Code layer 
by selecting the frame and hitting Fé. 
Double-click the frame to bring up the Actionscript 
entry dialog. Go into Expert mode again and enter the 
client code listing (the file code.txt is on your cover 
CD). Create keyframes in the second frames of all 
the other layers. 


To view the results of your labours, Press 
[Ctrl] + [Enter] to test the movie. 
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Flash: Integration 
with Generator 


With Generator Developer Edition you can easily automate your 
workflow, creating templates inside Flash that allow a range of 
graphic formats to be easily updated with external content... 


creating a template file inside of GIF, JPG, PNG, MOV or EXE formats. The 
Flash. This SWT file will link to an tutorial shows you how to use a small number 
i external text file and when of the Generator objects installed with Flash 5. 
generated on the server, Even if you don't own Generator you can still 
automatically bring in dynamic information improve your workflow by using the Generator 
into the generated format. Generator can use objects inside Flash. We learn how... 


( n this tutorial we're going to be the template file to create graphics in Flash, 
s/ 
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Part 1: Setting up 


Organise your bits and pieces now — you know it makes sense... 


External Data 


Generator can connect to arange 
of data sources. This tutorial 
looks at using text files as an 
external data source, but it can 
connect to databases like 
Microsoft Access or Oracle 8ivia 
JDBC/ODBC or obtain data 
from middleware such as ASR 
PHRJSP or Coldfusion. 
Generator can also obtain data 
from applications such as 
Vignette Storyserver or other 
Web applications. You can even 
obtain data from Java class files 
if desired. 


1 | Copy the demo files from www.computerarts. 
co.uk/cdrom onto your local server. Unless you 2 | Once a template has been processed, it 


do this, you will only be able to be complete a part 
of this tutorial and you'll miss out on learning about 
some of the most powerful features of Generator. 
This is required because the template files (.swt) are 
processed by the Generator Server. 


extracts the data from external sources and a Open the tutorial file generatordemo.fla from 


range of graphics can be generated. For example, 
you may wish to produce an SWF file from the 
template, but equally you could also create a GIF, 
JPEG, PNG or QuickTime movie with Generator. 


your server as shown above. You will notice 
there are several objects on the screen. Select the 
top text object and add ‘{firstname}' to the text and 
‘{motd}' and ‘{tune}' to the bottom two. 


Flash & 


These curly brackets tell Generator that you 

are going to replace it with external text data. 
They are, in effect, variables and can be used not 
only for replacing screen-based text but can be used 
in many places inside of Flash, such as with 
ActionScript and all the Generator Objects. 


5 | In order for Generator to replace these curly 
brackets with external data, we must tell it 
where to get the data from. This is done by clicking 
on the Generator Environment Variable button in 
the top right area, just above the timeline. In this 
case we select data.txt and delete the directory 
structure to make it relative. 


G Before publishing the SWT template file which 
is processed by Generator, make sure the 
Generator Template box is checked in the 
File>Publish Settings window. Unless this is checked, 
no SWT file will be published to the directory. 


Part 2: Publishing and testing 


Once the .swt file has been published, open it from your local Web server... 


Enterprise 
Integration 


Macromedia Generators the 
solution for delivering dynamic 
content graphically. With 


Generator, there are two product 


choices. Generator 2 Developer 
Editionis the data-driven 
solution for automatically 
updating Flash Websites. It 
processes one transaction at a 
time. Generator 2 Enterprise 
Editionis a high-performance, 
scalable solution for delivering 
real-time, visual content to 
audiences who require fast, 
personalised Websites. Its 
caching technology sends fewer 
requests over the network, 
which increases the speed of 
content delivery. 


Flash & Shockwave special 


0 
= 
i? 
=. 
¢ 
. 
= 
\e 
cE] 
. 


© It must be opened via the Web server — ie 
http://localhost/ — so that the SWT file is 
processed by the Generator server. To change the 
background colour, change the settings in the 
Publish Settings tab from within Flash. We can see 
that the curly brackets have been replaced from 
data in the text file. 


4 | The next object we are going to use is the 
Basic Charts object. Drag and drop this object 
from the Objects window. Use the Scale tool to 
resize it to fit in the area shown. For the datasource 
value for this object, type ‘chart.txt’. Make the chart 
type ‘Line’ and the colour red. 


ek 
2 We are now going to insert an external GIF 
file. Open the Window>Generator Objects 
window and drag and drop the Insert Gif File object 
on to the screen in the position shown. Set the Scale 
to Fit attribute to false when the Generator panel 
pops up. In the File Name value type ‘{logo}.gif’ This 
variable is also in the external text file, in the same 
way that {motd} and {tune} were used earlier. 


Generator Center 


We can see that the text file selected has 
several values, which will be brought across 


when generated. You can add other variables and 
change the settings of these items if desired. 


‘sek 
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oo 
a In order to test the movie, we don't have to 

keep publishing the movie to the Web server. 
Instead just test from it within Flash. This is achieved 
from the Control>Test Movie menu. We can see 
that the SWF file produced by Generator inserts the 
external GIF file. 


G Test the file locally once again, and we can see 
that the chart is automatically created from the 
external text file. You may wish to change the type 
of graph being produced and change some of the 
other settings in the Generator Panel. 


Part 3: Ticker integration and testing 


Those curly brackets are pretty crucial... 


The Generator SDK 


The open application 
programming interface (API) and 
softwaredevelopmentkit(SDK) = /-Regeess= = 
enable customisation of the 
development environment. If you 
need a specific list or chart to 
display your content, you can 
easily add new graphics to ones 
shipped with Generator. You can 
add new graphics to the Object 
Palette in Flash for all designers 
and developers to use, 


=_ = 
Ge Generator variables, or curly brackets, can be 


used in many places inside Flash. For example, 
we may wish to create a variable for the type of 


chart that is being produced by changing the chart 2] In order to test this, we must publish the movie 


When you open the SWT file from your server, 
add the following to the URL string 


type from Line to {kind}. Testing the movie from and open it from your local Web server. We ‘2kind=bar'’, as shown above. Then regenerate the 
within Flash will not work, because we haven't told pass Generator the information it requires for the SWF file by clicking refresh. You will notice that a 
Generator what {kind} equals. {kind} variable via the URL. bar chart version of the data has been produced. 


4 | Now change the type of chart that is produced 5 | The next object we're going to look at is the 
by changing the value of {kind} in the URL Ticker object. Drag and drop this from the G In order for this object to work, it must 


from Bar to Area. The type of chart that's produced Generator window on to the screen and resize reference a movie clip in the library, and this 
will then be an Area graph. Try other types in the accordingly. For the data source choose news.txt movie clip has been given an instance name 

URL such as Line. Now back inside Flash, change and for the Orientation choose Vertical. Test the ‘newsticker’ (see above) so that it can be referenced 
the chart type back to Bar. movie locally. from ActionScript. 


Bn Crotour) ¢ 
rant news ticker.play 0; 


Hen (release) { 
eto, C109"); 
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Inside the movie clip we can see that a button 
has been used to stop the ticker when the 


es 


— - — mouse moves over the blue area. Open the Actions 
You will see in the text file news.txt that this for this button (right-click on the button) and 
movie clip is called ‘News Clip’, and you will [ME‘]view the script. This is where the instance Now test the movie by publishing it 
find it in the library. ‘newsticker' is referenced. to the Web server. 
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Part 4: Controlling the graphics 


Quality, compression, size... 


White papers 

There are a range of ‘white 
papers’ regarding Generator on 
Macromedia's Website. These 
include performance testing, 
integration with ASP and 
ColdFusion, and the technical 
architecture of the product. For 
more information visit 
[w]www.macromedia.com/ 
software/generator/productinfo 
/whitepapers 


We can see that the animated Flash movie has 

been produced and the ticker object allows the 
mouse to move over the blue button to stop the 
ticker, then start when the mouse moves away. 


4 | Open the Publish Settings window and select 
the Jpeg check box and tab. Change the 
compression value from the default 80 and type in 
‘{quality}’. Now publish this move once again. 


Open the SWT file from within the Web server 
7 

and append to the string 
‘?type=jpg&quality=45&wsize=400&hsize=400' 
You can now control the format of graphic produced 
and the compression level, as well as the size. 
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g Now try changing the type in the URL from 


‘gif’ to ‘jpg’. The quality of the JPEG produced 
will, of course, depend on the settings in the Publish 
Settings window in Flash. We are now going to give 
control over this to the browser by giving the 
compression value a variable. 


12) Now instead of generating a Flash version of 
this file it is easy to get Generator to produce an 
animated GIF from this template. In the URL string 
add ‘?type=gif' and press Enter. You will see that an 
animated GIF version of the file has been produced. 


5 | Open the SWT from the Web server and add 
to the URL string ‘?type=jpg&quality=45'. You 
will notice you now have control over the 
compression settings for the graphics that are being 
generated. Test this with several values (1-100). 


G We can also give the width and height of the 
graphics variables as well. Deselect the Match 
movie check box inside the tab for jpeg settings 
and type in for the Width ‘{wsize}’ and Height 
‘{hsize}'. Now export the movie one more time. 


‘€ 
GENERATOR2 


——o——=— = 
8 | There are lots more objects to use with 

Generator most of which are self-explanatory. 
There are also a set of commands such as Set 
Colour, Set Alpha, Replace and Replicate. 


9 | And if you wish to extend the functionality 
of Generator even further, you can even 
create your own custom objects. So, the sky's the 
limit with Generator. FEES 


Project-based discussions and tutorials on Flash design... 


Hilman Curtis 


Publisher 


New Riders 


[ISBN 


0735708967 


ilman Curtis calls his 

approach to Flash graphics 

‘motion design’. Looking past 

the actual code of the 
animation under discussion, this book 
offers a more in-depth debate on the 
pros and cons of the design aesthetic, 
juxtaposed with the design projects’ 
actual goals. Curtis himself states, “I 
initially viewed the Web as a second- 
rate environment for design. But 
something happened to me when | 
began designing with Flash.” What 
happened to Curtis is detailed in the 
nine projects he discusses. 

The book itself is also a visual treat, 
often giving the impression of a piece of 
static Flash design with bold graphics 
and text supporting the actual tutorials. 

The projects illustrated cover a 
plethora of design concepts and offer 
many solutions to problems you may 
have already encountered in your own 


work. After a brief look at the basics of 
the Flash editor, each project attempts 
to illustrate a solution to a design 
problem: how to create a media spot in 
just 20Kb; how to add perspective and a 
third dimension to Flash designs; 
handling streaming MP3 with Flash and 
understanding Flash scripting. 

It is, however, the underlying 
discussion within each project that 
makes this book unique. Curtis 
supports his view that Flash animations 
are part of what he calls a ‘global visual 
language’ and the points he makes will 
be highly valid to every designer. As 
Curtis points out, “to be a graphic 
designer is to be a communicator.” 

The nine projects offer an insight into 
the procedures of one of the world’s 
leading Flash designers. The book itself 
is perhaps a little over-designed in its 
attempt to generate some motion 
graphics of its own, but this isn’t simply 


gloss. Each project does offer practical 
hands-on tutorials that enable you to 
experiment with the techniques under 
discussion. But at the same time, also 
teaches the design theory of motion and 
how it communicates its message. 


_ Verdict 


SH 


Flash 4 For Windows & Macintosh Visual Quickstart Guide 


Good, wiffle-and-frills-free guide for the beginner... 


Katherine Ulrich 


Publisher 


Peachpit Press 


ISBN 


020135473X 


hi 


welcome addition to the 
ever-growing range of 
Visual Quickstart guides, 

| | this manual follows the now 
tried-and-tested formula of presenting 
well designed tutorials that consist of 
numbered steps, supported by carefully 
chosen screenshots, taking you from 
first principles right through to 
advanced Flash design. 

Beginning with the foundations of 
Flash that consist of the Flash Editor, 
Timeline, Stage and toolbar, you are 
soon shown how to draw simple shapes, 
and how to animate them with the 
motion tweening method. By chapter 11 
you'll be able to manipulate multiple 
layers within any given animation and 
then apply this knowledge to any 
animation task you need to accomplish 
for your site. The text is always concise 
and never jargon-heavy, allowing the 
absolute beginner learn at their own 
pace. And with screenshots that show 


you what you should be seeing on 
screen at each step, your confidence 
need never falter. 

An integral part of any successful 
animation, sound is also closely 
considered — how to add sound to 
frames, importing sound and how to 
add sound to buttons are just some of 
the topics covered. 

Ultimately, your audience will be the 
judge of the success of any animation. 
Chapter 16 rounds it up with how to 
work with the Flash Player settings and 
controlling the placement of a movie 
within the browser window, also 
touching on setting MIME Types on 
your server and how to export Flash to 
other formats. 

Overall? Well, if you have just 
installed Flash for the first time, this 
manual will help you to learn each 
technique you need to master at your 
own pace, and serves as an excellent 
reference resource when you need to 


brush-up on a particular trick or 
function. More worked examples 
would have made this book even better, 
but if you're looking for a no-nonsense, 
plain-English explanation of each of 
Flash 4's features, you've come to the 
right place. 


Verdict 


SDI 
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Flash 4 Magic 


Pulling cool code and other cunning stunts from the pro hat 


David J Emberton 
& J Scott Hamlin 


New Riders 


0735709491 


f he source code on the CD 


alone is worth more than the 
price of this book,” states Joe 
/ Johnson of Dennis 

Interactive. This is certainly true as this 
book offers inspiration as well as 
detailed tutorials for the Flash virtuoso. 
This is nota book for the Flash beginner. 

Covering the new features that 
version 4 has to offer such as 
ActionScript, draggable objects, 
external scripts such as PHP and 
JavaScript, this is a manual for the 
advanced Flash user who is in need of 
some inspiration. Highly complex Flash 
design set-pieces are covered in each 
chapter that push Flash 4 to its limits. 
If you need help understanding any 
fundamental Flash techniques this not 
the book for you. 

Split into two sections, the first part 
of the book looks at building utilities. 
These use concepts like the stopwatch 


Flash 4 Bible 


From beginner to expert, there's something for everyone... 


Price 
£36.90 
Author 


Robert Reinhardt 
& Jon Warren Lentz 


Publisher 
IDG Books 


ISBN 
0764533568 
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he Bible series has 
attempted to provide a 
reference work for every level 
| of user, and for the most part 
it has succeeded. Beginners are able to 
progress at their own pace and will 
welcome the early chapters in this 
manual as they clearly explain how 
Flash works and how to manipulate an 
animation using the tools it provides. 
Impatient designers who want to cut 
straight to creating animations would 
nevertheless do well to read these early 
chapters as they offer a solid foundation 
on which to build your skills. 

Part four of this manual begins to 
show the reader the real power of Flash 
and how it can be put to work in 
creating interactive Web content, or 
nested movie clips, or even CGI scripts 
running on your Web server. Flash 
doesn't exist alone, which part five 
makes abundantly clear — Fireworks, 
Freehand, Director and of course 


project that illustrates the Get Timer 
function within Flash 4. The use of 
external scripts is also covered in 
detail. The Poll and Guestbook projects 
are excellent resources that exploit the 
awesome power of using PHP scripts 
within your Flash code. 

Part two looks at games you can 
build. These projects are among the 
most complex in the book, and should 
not be attempted before you feel 
confident handling the projects from 
part one, as many of the key techniques 
from the first section come into play in 
part two. 

Presented in landscape format, each 
project is cleanly laid out, numbered 
steps being accompanied by 
appropriate screenshots. Don't expect 
an explanation of each feature as this 
book takes for granted that you are 
already proficient with entering 
graphics and setting up the Timeline 


Photoshop are all discussed in the 
context of Flash. 

Any Flash development isn't any use 
if your audience can't see your creation. 
The final section of this manual looks 
closely at how Flash movies can be 
distributed. This includes the .swf 
format as well as how to publish onto 
CD-ROM. 

As you'd expect from a bible, more 
than Flash techniques are covered. 
Chapter 16 is an excellent example as it 
discusses Macromedia’s Generator 2 — 
there are some things that Flash still 
needs a little help with such as 
dynamically inserting graphics into 
Flash movies, which is where Generator 
comes in. This chapter is excellent, and 
allows you to dig deep into Flash’s 
innards and produce some truly 
professional results. 

The authors have thought long and 
hard about what the Flash designer 
would ask of them if they had the 


and Stage. With the final chapter 
discussing the ActionScript utilised in 
every project, this is a resource any 
serious Flash designer could learn from. 

Ultimately, this book provides a 
playground for the advanced Flash 
designer who wants some inspiration for 
their next project. The code contained 
on the accompanying CD can be used 
elsewhere and becomes an excellent 
resource that should reduce your 
development time. Written by 
professionals for professionals, the 21 
projects offer an insight into Flash 4 that 
has previously been unavailable. 


Verdict 


chance. You'll find the answers to just 
about all of your questions here, plus a 
few you hadn't thought of asking. This 
bible manages to be a beginners’ 
manual and comprehensive reference 
work, as well as offering some insight 
into little-known features of Flash that 
veterans will find a delight. If you only 
want to buy one book on Flash 
technique, make it this one. 


Verdict 


SEDI Ie 


Going straight to source for the best in Flash training... 


[Fie 


£29.99 


[ Author ; 


Derek Franklin 
& Brooks Patton 


[Publisher 


Macromedia Press 


( es 


0201354705 


fi 


hey say that you can't beat 
information from the horse’s 
mouth, and as this manual 
| comes from the Macromedia 
Press, that’s pretty much what you're 
getting. It’s essential to tackle this book 
sequentially, as it constitutes a 
complete Flash course that any 
beginner will be able to follow with 
ease. At its conclusion, you ought to be 
proficient with all the tools Flash has to 
offer, and be ready to flex your creative 
muscles with more advanced projects. 
Kicking off with a detailed 
description of the user interface, you 
begin by learning how to draw simple 
shapes within the Flash environment. 
The deft manipulation of these tools is 
an essential skill you must learn if your 
later designs are not going to suffer. You 
also pick up subtle hints such as the 
difference between the stage level layer 
and the overlay level layer. 


Text is often forgotten in the drive to 
produce stunning graphics, but text can 
play an important part in animation, in 
some cases becoming the focus of the 
piece. And chapter four does an 
admirable job of explaining how to use 
text within Flash. 

Sound is perhaps one of the most 
important considerations of any 
successful animation. An excellent 
chapter that concludes with four 
CD-based exercises is included, 
allowing you to add another dimension 
to your Flash movies. A full-colour 
gallery of some of the best Flash design 
currently available is welcome, too. 

Following a similar format to the 
Visual Quickstart guides from Peachpit 
Press, numbered steps show you 
exactly how to obtain the required 
effect. Although the use of screenshots 
is limited, the explanations are always 
written in plain English. One huge bonus 


Flash b Web Animation F/X & Design 


An adequate basic overview for beginners... 


£34.99 


Author | 


Ken Milburn 
& John Croteau 


| Publisher 


Coriolis 


| ISBN 


1576105555 


ffering an excellent 
ri] foundation in the art of Flash 

design, this addition to the 

F/X & Design series begins 
with what it calls a Snapshot of Flash. 
This offers an overview of what Flash is 
and what it has to offer the Web 
designer, this chapter also touches on 
the new features of version 4. Together 
with the second chapter in which the 
authors look closely at how Flash 
interfaces with other Macromedia 
programs, this offers an excellent 
foundation of knowledge to be applied 
in later chapters. 

If you are looking for a reference 
manual for Flash 4, this is not the ideal 
buy as this book is designed to be read 
sequentially, building your knowledge 
of Flash one technique at a time. The 
practical work begins with a detailed 
chapter on the icons you will see within 
your Flash environment, and then 
moves on to explain some basic 


drawing techniques before looking at 
how to actually animate. 

By the time you reach chapter eight 
you should have a basic grasp of how to 
set up an animation using Flash 4. From 
then on, you'll see how to enhance your 
designs and give them a professional 
polish. Also included is a chapter on the 
new features of version 4 that have 
removed the previous limitations; you 
can now add streaming interactive 
content to your design, for instance. 

A more structured approach would 
have allowed the beginner to grasp 
each concept before moving on to the 
next. Also, screenshots seem to be few 
and far between, seemingly replaced 
with pages of textual explanations. And 
why has the truly useful Appendix A 
been dumped at the back of the book? 
It’s an excellent, concise description of 
each of Flash 4's features, and lists each 
menu command and keyboard 
shortcut — it should really have been 


that many other software manuals 
would do well to note are the 
accompanying QuickTime movies that 
allow you to practise your skills 
on-screen, providing a level of teaching 
second to none. Beginners will find this 
manual an excellent companion. 


Verdict 


included in chapter one along with the 
Flash Snapshot. 

There are many books on the market 
that will teach basic Flash from first 
principles to advanced design. This 
manual offers an adequate guide for 
beginners, but you always feel the 
subject has been skirted over. As an 
overview this book works, but lacks the 
depth a user would be looking for. EEE 


Verdict 
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